HTML | DOM option index Property
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:
- It is used to return the index property.
optionObject.index
- It is used to set the index property.
optionObject.index = integer
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 >w3wiki</ 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 = "myBeginner()" >Submit </ button > < p id = "sudo" style="font-size:25px; color:green;"> </ p > < script > function myBeginner() { // 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 >w3wiki</ 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 = "myBeginner()" >Submit </ button > < p id = "sudo" style="font-size:25px; color:green;"> </ p > < script > function myBeginner() { // 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