How to show the index of the selected option in a dropdown list with JavaScript?

Javascript Web Development Front End Technology

We use the selectedIndex property in JavaScript to show the index of the selected option in a dropdown list. We use the id of the dropdown list to access the element using JavaScript and then call selectedIndex on it to get the index of the selected option in the dropdown list.

Dropdown lists are an important part of user interface utility. It is a list of options from which one or multiple options can be selected by the user. These responses to these dropdown lists are then collected and the required course of action is taken by the user.

A dropdown list is normally used in situations where the user has a number of options and one or more of them needs to be selected.

Using the selectedIndex Property

It is a property of dropdown lists in the document object model of JavaScript. It contains the index of the selected option in the dropdown list in the HTML document.

The indexing is 0-based.

Syntax

var index = document.getElementById("dropDownListId").selectedIndex;

We first reference the dropdown list using its Id, "dropDownListId" and extract the index of the selected option in a variable index.

Let’s look at an example to understand better.

Example 1

In the code snippet below, we have a dropdown list for selecting the windows version in a form. The user selects the desired option and then clicks the submit button. Then we show the index of the selected option in the HTML body.


<!DOCTYPE html>
<html>
<body>
   <p> Which windows version do you use ? </p><br>
   <form id="myForm"> 
      <select id="selectNow">
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
      </select> 
      <input type="button" onclick="display()" value="Submit !"> 
   </form>
   <p>Select and click the button to get the index of the selected option.<br></p>
   <div id="result"></div>
   <script>
      function display() {
         var index = document.getElementById("selectNow").selectedIndex;
         document.getElementById("result").innerHTML = "The selected index is :" + index;
      }
   </script>
</body>
</html>

The submit button triggers the display() function which extracts the index of the selected option and prints the index in the HTML body.

Not only the index but the value of the option selected can also be extracted using the value property.

var value = document.getElementById("dropDownListId").value;

We first reference the dropdown list using its Id and extract the index of the selected option in a variable index.

Let’s look at an example to understand better.

Example 2

In the below code snippet, we will create a button that first extracts the list of all links present in the HTML document and then iterates on that list to log every hyperlink in the HTML body.


<!DOCTYPE html>
<html>
<body>
   <p> Which windows version do you use ? </p><br>
   <form id="myForm"> 
      <select id="selectNow">
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
         </select> 
      <input type="button" onclick="display()" value="Submit !"> 
   </form>
   <p>Select and click the button to get the index of the selected option.<br></p>
   <div id="result"></div>
   <script>
      function display() {
         var index = document.getElementById("selectNow");
         var resultDiv = document.getElementById("result");
         var text = "";
         text += "The selected option is :" + index.value;
         resultDiv.innerHTML = text;
      }
   </script>
</body>
</html>

The submit button triggers the display() function which extracts the value of the selected option and logs it in the HTML body.

NOTE − If no options are selected, the index is returned as -1.

Note −

However, there are limitations to the selectedIndex feature of JavaScript.

In the multi-select dropdown list, selectedIndex returns only the first index of the selected options and thus we have a workaround for that.

For dropdown lists that allow multiple selections, we use the for ... of loop on the options property of the corresponding dropdown list JavaScript object. For each option, we check if its selected attribute is true or not.

Let’s understand this better with an example −

Example 3

In the below code snippet, we have a multi-select dropdown list, we will create a button that first extracts the list of all options in the dropdown list and then iterate over them to check which one is selected.


<!DOCTYPE html>
<html>
<body>
   <p> Which windows versions do you use? </p>
   <p> You can select multiple options. </p>
   <form id="myForm">
      <select id="selectNow" multiple>
         <option>Windows 11</option>
         <option>Windows 10</option>
         <option>Windows 8</option>
         <option>Windows 7</option>
         <option>Windows vista</option>
         <option>Windows XP</option>
         <option>Windows 2000</option>
         <option>Windows 98</option>
      </select>
      <input type = "button" onclick = "display()" value = "Submit">
   </form>
   <p>The selected options are : <div id = "result"> </div></p>
   <script>
      function display(){
         var options = document.getElementById("selectNow").options;
         var text = "";
         for(option of options){
            if(option.selected) text += option.value + "<br>";
         }
         document.getElementById("result").innerHTML = text;
      }
   </script>
</body>
</html>

The Submit button triggers the display() javascript function which extracts all the options in the drop down list and logs it in the HTML body.