Get selected value in dropdown list using JavaScript

In this article, we will focus on how to get the selected value in the dropdown list in JavaScript.There are two ways to achieve that.

Using Value Property
Using selectedIndex property with Option Property

Getting selected value in the dropdown list using JavaScript

We can do this in two ways:

Using value property.
selectedIndex property with Option Property.

Using Value property

In this method, we can get the selected element in the list by using the value property. It returns the string that is represented in the value attribute of the options element. Here we select the element using document.querySelector() and then store the value of the selected element in the output variable then we show that in our HTML page using the textContent property of the document.querySelector() when the Answer button is clicked.

<head>
    <title>
        Selecting
    </title>
</head>
  
<body>
    <h1 style="color: rgb(36, 0, 128)">
        Selected value
    </h1> 
    <p> Select one from the given options:
        <select id="options">
            <option value="juice">Juice</option>
            <option value="food">Food</option>
            <option value="snacks">Snacks</option>
        </select>
    </p>
    <p> The value of selected option is: 
        <span class="ans"></span>
    </p>
    <button onclick="getAnswer()">Answer </button>
      
    <script type="text/javascript">
    function getAnswer() {
        selectedElement = document.querySelector('#options');
        output = selectedElement.value;
        document.querySelector('.ans').textContent = output;
    }
    </script>
</body>
  
</html>

Output:

Using selectedIndex property with Option Property

In this method, the option property returns the array of all option elements in the dropdown list sorted according to source code. The selectedIndex returns the index of the selected element. So we use the selectedIndex property to get the index of the selected element and then pass it to the option property to get access to the value attribute of that element.

 
<head>
    <title>
        Selecting
    </title>
</head>
  
<body>
    <h1 style="color: rgb(36, 0, 128)">
        Selected value by method 2
    </h1> 
    <p> Select one from the given options:
        <select id="options">
            <option value="juice">Juice</option>
            <option value="food">Food</option>
            <option value="snacks">Snacks</option>
        </select>
    </p>
    <p> The value of selected option is: 
        <span class="ans"></span>
    </p>
    <button onclick="getAnswer()">Answer </button>
      
    <script type="text/javascript">
    function getAnswer() {
        selectedElement = document.querySelector('#options');
        output = selectedElement.options[selectedElement.selectedIndex].value;
        document.querySelector('.ans').textContent = output;
    }
    </script>
</body>
  
</html>

Output:

Get selected value in dropdown list using JavaScript

Getting selected value in the dropdown list using JavaScript

Using Value property

Using selectedIndex property with Option Property

Leave a Reply Cancel reply