Select optionsCollection
Select Object
Definition and Usage
The options collection returns an array containing all <option> elements in the <select> element.
Note:Each element in the array corresponds to an <option> tag - starting from 0.
Syntax
selectObject.options
Properties
| Properties | Description |
|---|---|
| length | Returns the number of option elements in the collection |
| selectedIndex | Sets or returns the index value of the selected option in the select object. (starting from 0) |
Methods
| Methods | Description |
|---|---|
| [index] | Specifies the element index in numeric form (starting from 0) |
| [add(element[,index])] | Adds an option element to the collection |
| item(index) | Returns the element in the collection by numeric index |
| namedItem(name) | Returns the collection element indexed by name |
| remove(index) | Removes an element from the collection |
Browser Support
All major browsers support the options collection
Examples
Examples
Loop through and output all options in the drop-down list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<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>
<button type="button" onclick="displayResult()">Display the text of all options</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<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>
<button type="button" onclick="displayResult()">Display the text of all options</button>
</body>
</html>
Try it Yourself »
More Examples
Select Object Other Extensions