How to get selected value in dropdown list using JavaScript ?

Method 1: Using the value property: The value of the selected element can be found by using the value property on the select element that defines the list. This property returns a String representing the value attribute of the <option> element in the list. If no option selected then nothing will be returned.

Syntax:

selectElement.value

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

  • Before clicking the button:
    value-before
  • After clicking the button:
    value-after

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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">s
        function getOption() {
            selectElement = document.querySelector('#select1');
                      
            output = 
              selectElement.options[selectElement.selectedIndex].value;
  
            document.querySelector('.output').textContent = output;
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    selectedIndex-before
  • After clicking the button:
    selectedIndex-after


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.