How to display the selected option in a dropdown list with JavaScript?

In this tutorial, we will learn how to display the selected option in a dropdown list with JavaScript.

What is a dropdown list? A dropdown list is a switchable menu that enables users to select one item from various options.

A drop-down list is generated with the <select></select>tag is most frequently used in forms to gather user input. After submitting the form, the name attribute must refer to the form's data.

The DOM API functions getElementById() and querySelector() can be used to choose a <select> element. The process use the queryselectorfunction to first select the "button" and "select" elements. Then the selected index can be displayed using JavaScript when the button is clicked. Attach a click event listener to the button.

Now let us see the methods to display the selected option in the dropdown list.

Using selectedIndex Property of the Option

In this section, we will learn how to get the selected option in a dropdown using the selectedIndexproperty. The index of the element in the drop-down list that is now selected is returned by the selectedIndex property. If none of the options is selected, this index, which starts at 0, yields -1.

All of the option items in the pick drop-down list are collected by the options property, which returns them. The page's source code determines the order of the elements.To retrieve the specified element, utilize this property, and the index found before it. The value attribute of this option can be used to determine its value.

Syntax

Follow the syntax below to use the selectedIndex property.

selectelEment[selectElement.selectedIndex].value

Here, selectedIndex is the index of the selectElement and value property returns the value of the selected element.

Example

In the below example, we have a form tag. Select tag with multiple options within the form tag. The select tag has an onchange() event that will execute a function when the user selects an option from the dropdown list. In this function, we select the select tag within the form tag using the name attribute assigned to each tag.

Then, the selectedIndex of these elements is taken from the element array and displays the value. This value is displayed in the innerHTML of the empty Dom available.


<html>
<head>
   <title>Program to dispaly the selected options in a dropdown list</title>
</head>
<body>
   <h2>Using the <i>selectedIndex</i> property.</h2>
   <form name="dropForm">
      <select name="dropSelect" onchange="showDropInfo()">
         <option value="P">Select:</option>
         <option value="A">Option 1</option>
         <option value="B">Option 2</option>
         <option value="C">Option 3</option>
      </select>
   </form>
   <p id="pF"></p>
   <p id="pS"></p>
   <p id="pT"></p>
   <script>
      function showDropInfo() {
         var sT = dropForm.dropSelect;
         var pF = document.getElementById('pF');
         var pS = document.getElementById('pS');
         var pT = document.getElementById('pT');
         pF.innerHTML = ('Selected option index: ' + sT.selectedIndex);
         pS.innerHTML = ('Selected value: ' + sT[sT.selectedIndex].value);
         pT.innerHTML = ('Selected text: ' + sT[sT.selectedIndex].text);
      }
   </script>
</body>
</html>

Using the value Property

In this section, we will learn how to get the selected option in a dropdown using the value property. The value property on the selected element that specifies the list can be used to determine the value of the selected element. This property returns a string corresponding to the value attribute of the list's "option" element. Nothing will be returned if no option is chosen.

Syntax

selectElement.value

In the above syntax, selectElement.value returns the text value of the selected option from the option menu.

Algorithm

STEP 1 − Create a select tag with multiple options and assign an id to the select tag.
STEP 2 − Also, create an empty DOM with an id to display the output.
STEP 3 − Let there be a button element for the user to click and see the option selected.
STEP 4 − Let the user select an option from the dropdown list.
STEP 5 − Get the selected value using the query selector and display it to the user.

Example

In this example, we have created a select tag with a few options. There is a DOM to display the output and a button element for the user to invoke the option selection function. When a user clicks on this button, the respective Dom displays the selected value in the dropdown list using the query selector and value option.


<html>
<body>
   <h2>Using the <i>value</i> property</h2>
   <p>Select an option:
      <select id="s1">
         <option value="green">Green</option>
         <option value="blue">Blue</option>
         <option value="purple">Purple</option>
      </select>
   </p>
   <p>Selected option value :
      <span class="op"></span>
   </p>
   <button onclick="selOpt()">Option check</button>
   <script type="text/javascript">
      function selOpt() {
         selEl = document.querySelector('#s1');
         op = selEl.value;
         document.querySelector('.op').textContent = op;
      }
   </script>
</body>
</html>

In this tutorial, we have learned to display the selected option in a dropdown list using two methods.

The method that uses selectedIndex is a bit complex since it filters the value from the options array. The method using queryselector or document.getElementById is more useful as it takes value directly.