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

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:
Set index: selectObject.selectedIndex = numberReturn 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 deselectedHere you can see that index return by selectedIndex property is -1
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
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
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?