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.
<!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
.png)
.png)
