How to Get the Selected Value from a Dropdown List using JavaScript?

Getting the selected value of a dropdown is something that we’ve to sometimes in JavaScript.

In this article, we’ll look at how to get the selected value from a dropdown with JavaScript.

Get the Selected Value from a Dropdown List

To get the selected value from a dropdown list, we can get the select element.

Then we can use the value property to get the value of the value attribute of the selected option element.

For instance, if we have the following HTML:

<select>
  <option value="1">apple</option>
  <option value="2" selected>orange</option>
  <option value="3">grape</option>
</select>

Then the 2nd option element is selected since we have the selected attribute added to it.

So we can write:

const select = document.querySelector("select");
const selectedChoice = select.value;
console.log(selectedChoice)

to get the select element with document.querySelector .

Then we get the value of the value attribute of the select option element with the value property.

And then we should see that selectedChoice is 2.

Get the Text of the Selected Option Element from a Dropdown List

We can also get the text of the select option element from a dropdown list.

To do that, we write:

const select = document.querySelector("select");
const value = select.options[select.selectedIndex].value;
const text = select.options[select.selectedIndex].text;
console.log(value, text)

assuming we have the same HTML code as before.

We get the select element with document.querySelector .

Then we get all the options in an object with the select.options property.

select.selectedIndex has the index of the selected option element.

The value property has value of the value attribute of the selected element.

And text property has the text of the option element in the selected element.

Therefore, value is 2 and text is 'orange' .

Watch for Changes

We can listen to the change event of the dropdown to watch for changes in the choice of the selected item.

For example, if we have the same select element of the previous 2 examples, we can write:

const select = document.querySelector("select");
select.addEventListener('change', (event) => {
  const {
    value,
    text
  } = event.target.options[event.target.selectedIndex]
  console.log(value, text)
})

We get the select element as we did before.

Then we get the options from the event.target.options .

And we can access the index of the selected choice with the event.target.selectedIndex .

Then we can get the value of the value property with the value property.

And text gets the text content of the selected item in the option element.

Conclusion

We can get the selected option element from the select element with the value property, which has the value of the value attribute of the selected option element.

We can also get all the options with the options property.

selectedIndex gets the index of the selected option element.