The DOM option index Property is used to set or return the index position of option value in a dropdown list. The index starts from zero.
Syntax:
Property Values:
- It defines a integer value of index position of option value in a dropmenu list.
Return Value: It returns a numeric value which represent the index position of a option value.
Example-1: This example illustrates how to return the option value in the DropDown List.
<!DOCTYPE html>
<html>
<head>
<title>DOM option index Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM option index Property</h2>
<select id="GFG">
<option>Choose an option
</option>
<option value="html">HTML
</option>
<option value="java">JAVA
</option>
<option value="C++">C++
</option>
<option value="php">PHP
</option>
<option value="perl">PERL
</option>
</select>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="myGeeks()">Submit
</button>
<p id="sudo"
style="font-size:25px;
color:green;">
</p>
<script>
function myGeeks() {
// Return option value.
var x = document.getElementById(
"GFG").selectedIndex;
var y = document.getElementById(
"GFG").options;
document.getElementById("sudo").innerHTML =
(y[x].text + " is in " + y[x].index +
"th " + "index position");
}
</script>
</body>
</html>
|
Output:
Before Clicking On Button:
After Clicking On Button :
Example-2: This example illustrates how to display all the indexes position of the Options.
<!DOCTYPE html>
<html>
<head>
<title>DOM option index Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM option index Property</h2>
<select id="GFG">
<option>Choose an option</option>
<option value="html">HTML</option>
<option value="java">JAVA</option>
<option value="C++">C++</option>
<option value="php">PHP</option>
<option value="perl">PERL</option>
</select>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="myGeeks()">Submit
</button>
<p id="sudo"
style="font-size:25px;
color:green;">
</p>
<script>
function myGeeks() {
// display all option.
var w =
document.getElementById("GFG");
var txt =
"All options in a DropDown list: ";
var i;
for (i = 0; i < w.length; i++) {
txt = txt + "\n" + w.options[i].text +
" has index: " + w.options[i].index;
}
alert(txt);
}
</script>
</body>
</html>
|
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM option index Property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 Feb, 2019
Like Article
Save Article