How to Get Currently Selected Option in JavaScript

1. Use the HTMLSelectElement.options to Get the Current Option From a Select List Using JavaScript
2. Use the HTMLSelectElement.selectedOptions to Get the Current Option From a Select List Using JavaScript

We can have different types of forms in web pages, where each field is of some type. Sometimes, we have to choose an option from the drop-down list. The <select> element is used to create a drop-down list. The <option> tags inside <select> tag is used to define options in the drop-down list.

This tutorial will introduce how to get the currently selected option in the <select> element using JavaScript.

Use the HTMLSelectElement.options to Get the Current Option From a Select List Using JavaScript

The HTMLSelectElement.options property returns the HtmlOptionsCollections of the <option> elements present in the <select> element.

We can create a function which will show the value of the selected option from the list.

Check the code below.

HTML Code:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript Code:

var selection = document.getElementById('cars');
function select() {
  alert(selection.options[selection.selectedIndex].value);
}

The selectedIndex returns the index of the selected option.

Use the HTMLSelectElement.selectedOptions to Get the Current Option From a Select List Using JavaScript

This HTMLSelectElement.selectedOptions contains the list of all the <option> elements which are defined in the <select> element that are selected.

Check the code below.

HTML Code:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript Code:

var selection = document.getElementById('cars');
function select() {
  alert(selection.selectedOptions[0].value);
}

This method does not generally work on Internet Explorer.