Select options collection
Select object
Definitions and usages
The option collection returns an array that contains all of the elements of the option.
Note: Each element in the array corresponds to a label that starts at 0.
Grammar
selectObject.options
Property
| Attributes | describe |
|---|---|
| length | Returns the number of options for the set |
| selectedIndex | Set or return the index value of the Select object selected option.(Starting with 0) |
Method
| method | describe |
|---|---|
| [ index ] | Specify element indexes in digital form (starting with 0) |
| [add( element [, index ])] | Add an Option element in a collection |
| item( index ) | Return the elements in the collection with digital index |
| namedItem( name ) | Returns the collection element with name index |
| remove( index ) | Remove elements from a collection |
Browser support
Options collections are supported by all major browsers
Loop outputs all options in the drop-down list:
<!
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Online tutorials for W3Cschool (w3cschool.cn)
<script>
function displayResult(){
var x=document.getElementById("mySelect");
var txt="All options: ";
var i;
for (i=0; i <x.length; i++){
txt=txt + "\n" + x.options[i].text;
}
alert(txt);
}
</script>
</head>
<body>
<form>
Your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
</form>
the text of all options is displayed, the text of all options is displayed.
</body>
</html>
<html>
<head>
<meta charset="utf-8">
Online tutorials for W3Cschool (w3cschool.cn)
<script>
function displayResult(){
var x=document.getElementById("mySelect");
var txt="All options: ";
var i;
for (i=0; i <x.length; i++){
txt=txt + "\n" + x.options[i].text;
}
alert(txt);
}
</script>
</head>
<body>
<form>
Your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
</form>
the text of all options is displayed, the text of all options is displayed.
</body>
</html>
Try it out . . .
More instances
Modify the options for the current drop-down menu with another drop-down menu selected option.
Select object