Skip to main content Accessibility Feedback

Detecting select menu changes with vanilla JS

The other day, a reader asked:

Is there a way to detect changes to select menu 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);

Here’s a demo you can play with.