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
play_arrow
brightness_4
<!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.
filter_none
edit
play_arrow
brightness_4
<!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.
filter_none
edit
play_arrow
brightness_4
<!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
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.