Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 15 Apr, 2019

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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.




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

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.




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

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.




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

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
Recommended Articles
Page :

Start Your Coding Journey Now!