How to set the value of a select box element using JavaScript?

In JavaScript, selectedIndex property is used to set the value of a select box element. The selectedIndex property sets or returns the index of the selected value in a drop-down list.

Syntax:

Set index: selectObject.selectedIndex = number
Return index: selectObject.selectedIndex



Note: Integer number is used for Index at the value place.

Example-1: Select a index number.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
  
    <select id="mySelect">
        <option>football</option>
        <option>Basketball</option>
        <option>Hockey</option>
        <option>Swiming</option>
    </select>
  
    <p>
      Click the button to select the 
      option element with index "2".
  </p>
  
    <button onclick="myFunction()">
      click me
  </button>
  
    <script>
        function myFunction() {
            document.getElementById(
              "mySelect").selectedIndex = "2";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before clicking on button, it stays on index 0:

After clicking on button, it go on index 2:

Example-2: If you select selectedIndex = “-1”; it will deselect all the elements of selectbox.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
  
    <select id="mySelect">
        <option>football</option>
        <option>Basketball</option>
        <option>Hockey</option>
        <option>Swiming</option>
    </select>
  
    <p>
      Click the button to 
      deselect options.
  </p>
  
    <button onclick="myFunction()">
      Click me
  </button>
  
    <script>
        //Here we delselect all the options 
        function myFunction() {
            document.getElementById(
              "mySelect").selectedIndex = "-1";
        }
    </script>
  
</body>
  
</html>

chevron_right


Output:
Before clicking on button, it stays on index 0:

After clicking on button, all elements gets deselected:

Example-3: If any element is not selected then this property returns -1.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  
    <h1 style="color: green;">
            GeeksforGeeks 
        </h1>
  
    <select id="mySelect">
        <option>football</option>
        <option>Basketball</option>
        <option>Hockey</option>
        <option>Swiming</option>
    </select>
  
    <p>
      Click the button to 
      deselect options.
  </p>
  
    <button onclick="myFunction()">
      Click me</button>
  
    <script>
        //Here we delselect all the options 
        function myFunction() {
            document.getElementById(
              "mySelect").selectedIndex = "-1";
        }
  
        //here we are taking value of index
        function yourFunction() {
            var x = document.getElementById(
              "mySelect").selectedIndex;
            
            document.getElementById(
              "demo").innerHTML = x;
        }
    </script>
  
    <button type="button" onclick="yourFunction()">
        Display index 
    </button>
  
    <p id="demo"></p>
  
</body>
  
</html>

chevron_right


Output :

After clicking on button, all elements gets deselected

Here you can see that index return by selectedIndex property is -1



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.