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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

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); });

select onchange get value and text

We added a change event listener to the select element.

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

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] select.addEventListener('change', function handleChange(event) { console.log(select.options); // 👉️ [option, option, option, option] });

We can use the selectedIndex property to get the index of the currently selected option.

index.js
const select = document.getElementById('select'); console.log(select.selectedIndex); select.addEventListener('change', function handleChange(event) { console.log(select.selectedIndex); });

get index of currently selected option

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. The index can be used 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.

Use the search field on my Home Page to filter through my more than 3,000 articles.