Search for a command to run...
Replacing deprecated event.target.selectedIndex with this.selectedIndex
No comments yet. Be the first to comment.
index.html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Workers</title> <script src="main.js"></script> </head> <body> 1 USD = <span...
Fetch the latest currency conversion rate using async ... await
Taking advantage of latest JavaScript features: ECMAScript 2024
Using destructuring to update an object's attribute
JavaScript
12 posts
Sometimes we want to 'listen' to an event change of the select element. Especially when the option is changed - and get the newly selected value and store it elsewhere. For this we use onchange on the select element and not on the option element.
There are 2 ways to get the selected option's value, I'll show both, the first one being deprecated but still works but has been Legacy’d into standarization for the window object.
event.target.selectedIndex
this.selectedIndex
The event object is part of window object which should be window.event but browsers may drop support for it in the future. Instead use this.selectedIndex.
this[this.selectedIndex].getAttribute('data-email')
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Cache-control" content="no-cache">
<title>capture option data on select change</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex flex-column">
<h3 class="mb-3">User</h3>
<div class="input-group mb-3">
<select
id="user"
onchange="
document.querySelector('#user-email').value = this[this.selectedIndex].getAttribute('data-email');
document.querySelector('#user-mobile').value = this[this.selectedIndex].getAttribute('data-mobile');
"
class="form-control"
>
<option selected>Select a User</option>
<option value="1" data-email="john@yahoo.com" data-mobile="6666666666">John Matthews</option>
<option value="4" data-email="harry@gmail.com" data-mobile="8888888888">Harry Smith</option>
<option value="5" data-email="donald@hotmail.com" data-mobile="3333333333">Donald More</option>
<option value="19" data-email="smith@matrix.com" data-mobile="1111111111">Agent Smith</option>
<option value="20" data-email="bruce@space.com" data-mobile="9898989898">Bruce Kennedy</option>
</select>
</div>
<div class="mb-3">
<input type="text" name="user-email" id="user-email" class="form-control" placeholder="Email" disabled />
</div>
<div>
<input type="text" name="user-mobile" id="user-mobile" class="form-control" placeholder="Mobile" disabled />
</div>
</div>
</body>
</html>
Demo : https://anjanesh.s3.amazonaws.com/demo/capture-option-data-on-select-change.html