How to get selected value in dropdown list using JavaScript ? - GeeksforGeeks

22 Nov, 2021
In this article, we will learn to get the selected values in the dropdown list in Javascript. We can get the values using 2 methods:
By using the value property
By using selectedIndex property with the option property
We will understand both these methods through the examples.
Method 1: Using the value property: 
The value of the selected element can be found by using the value property on the selected element that defines the list. This property returns a string representing the value attribute of the <option> element in the list. If no option is selected then nothing will be returned.
Syntax:
selectElement.value
Example: This example describes the value property that can be found for the selected elements.
HTML
<!DOCTYPE html> <head>    <title>        How to get selected value in        dropdown list using JavaScript?    </title></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>    <b>        How to get selected value in dropdown        list using JavaScript?    </b>     <p> Select one from the given options:        <select id="select1">            <option value="free">Free</option>            <option value="basic">Basic</option>            <option value="premium">Premium</option>        </select>    </p>       <p> The value of the option selected is:        <span class="output"></span>    </p>      <button onclick="getOption()"> Check option </button>         <script type="text/javascript">    function getOption() {        selectElement = document.querySelector('#select1');        output = selectElement.value;        document.querySelector('.output').textContent = output;    }    </script></body> </html>
Output:
value property
Method 2: Using selectedIndex property with the option property:
The selectedIndex property returns the index of the currently selected element in the dropdown list. This index starts from 0 and returns -1 if no option is selected. The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element. This option’s value can be found by using the value property.
Syntax:
selectElement.options[selectElement.selectedIndex].value
Property value:
selectedIndex: It is used to set or get the index of the selected <option> element in the collection.
length: It is read-only property that is used to get the number of <option> elements in the collection.
Return value: It returns HTMLOptionsCollection Object by specifying all the <option> elements in the <select> element. The element will be sorted in the collection
Example: This example describes the selectedIndex property with the option property.
HTML
<!DOCTYPE html> <head>    <title>        How to get selected value in        dropdown list using JavaScript?    </title></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>    <b>        How to get selected value in        dropdown list using JavaScript?    </b>      <p> Select one from the given options:        <select id="select1">            <option value="free">Free</option>            <option value="basic">Basic</option>            <option value="premium">Premium</option>        </select>    </p>        <p> The value of the option selected is:        <span class="output"></span>    </p>      <button onclick="getOption()">Check option</button>    <script type="text/javascript">     function getOption() {        selectElement = document.querySelector('#select1');        output = selectElement.options[selectElement.selectedIndex].value;        document.querySelector('.output').textContent = output;    }    </script></body> </html>
Output:
selectedIndex property with option property
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
bhaskargeeksforgeeks
sumitgumber28
JavaScript-Questions
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Set the value of an input field in JavaScript
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?