Get the Value/Text of Select or Dropdown on Change using JS

avatar

Borislav Hadzhiev

Wed Jan 05 20222 min read

banner

Photo by Danka & Peter

Get the Value/Text of Select or Dropdown on Change #

To get the value and text of a select element on change:

  1. Add a change event listener to the select element.
  2. Use the value property to get the value of the element, e.g. select.value.
  3. Use the text property to get the text of the element, e.g. select.options[select.selectedIndex].text.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <select id="select" style="font-size: 3rem"> <option value="">--Choose an option--</option> <option value="horse">Horse ๐Ÿด</option> <option value="wolf">Wolf ๐Ÿบ</option> <option value="fox">Fox ๐ŸฆŠ</option> </select> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const select = document.getElementById('select'); select.addEventListener('change', function handleChange(event) { console.log(event.target.value); // ๐Ÿ‘‰๏ธ get selected VALUE // ๐Ÿ‘‡๏ธ get selected VALUE even outside event handler console.log(select.options[select.selectedIndex].value); // ๐Ÿ‘‡๏ธ get selected TEXT in or outside event handler console.log(select.options[select.selectedIndex].text); });

We added a change event listener to the select element.

Every time the value of the select changes, the handleChange function gets invoked.

In the example, we used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In the example, the event.target property points to the select element, because that is the element the event was dispatched on.

The value property allows us to read or set the value of the select element.

index.js
const select = document.getElementById('select'); // โœ… Read value console.log(select.value); // ๐Ÿ‘‰๏ธ "" // โœ… Set value select.value = 'fox'; console.log(select.value); // ๐Ÿ‘‰๏ธ "fox"
When setting the value of a select element, make sure to set it to one of the values of the option elements.

The options property on the select element returns an array-like object that contains all of the options of the select element.

index.js
const select = document.getElementById('select'); console.log(select.options); // ๐Ÿ‘‰๏ธ [option, option, option, option]

To get the index of the currently selected option, we can use the selectedIndex property.

index.js
const select = document.getElementById('select'); console.log(select.selectedIndex);

Initially it is set to 0, but if you console.log the selectedIndex in the handleChange function and change the selected element, you will see the index change.

The selectedIndex property can be used to get the index of the currently selected option element, which we can use to get the element's value and text.

index.js
const select = document.getElementById('select'); select.addEventListener('change', function handleChange(event) { // ๐Ÿ‘‡๏ธ get selected VALUE even outside event handler console.log(select.options[select.selectedIndex].value); // ๐Ÿ‘‡๏ธ get selected TEXT in or outside event handler console.log(select.options[select.selectedIndex].text); });

This approach can be used both inside and outside of an event handler function.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee