Detecting select menu changes with vanilla JS
The other day, a reader asked:
Is there a way to detect changes to
selectmenu values with vanilla JS?
Yes there is!
There are two events that detect changes to input, textarea, and select elements: change and input.
The change event feels like it would be the right one, but it only fires when focus leaves the field. To detect real-time changes, you want the input event.
<select id="wizard">
<option value="">Pick One</option>
<option value="Harry Potter">Harry Potter</option>
<option value="Hermione">Hermione</option>
<option value="Voldemort">Voldemort</option>
</select>document.addEventListener('input', function (event) {
// Only run on our select menu
if (event.target.id !== 'wizard') return;
// Do stuff...
}, false);
With a select menu, you can get the value, if there’s one on the selected option, using event.target.value.
You can also get the option element itself using event.target.options and event.target.selectedIndex. The former returns an array-list list of option elements, and the latter returns the index of the selected option.
document.addEventListener('input', function (event) {
// Only run on our select menu
if (event.target.id !== 'wizard') return;
// The selected value
console.log(event.target.value);
// The selected option element
console.log(event.target.options[event.target.selectedIndex]);
}, false);