Find out how many options there are in a specific drop-down list:
The result of x will be:
More "Try it Yourself" examples below.
The options collection returns a collection of all <option> elements in a drop-down list.
Note: The elements in the collection are sorted as they appear in the source code.
Collection | |||||
---|---|---|---|---|---|
options | Yes | Yes | Yes | Yes | Yes |
Property | Description |
---|---|
length | Returns the number of <option> elements in the collection. Note: This property is read-only |
selectedIndex | Sets or returns the index of the selected <option> element in the collection (starts at 0) |
Method | Description |
---|---|
[index] | Returns the <option> element from the collection with the specified index
(starts at 0). Note: Returns null if the index number is out of range |
[add(option[,index])] | Adds an <option> element into the collection at the specified index. If no index is specified, it inserts the option at the end of the collection |
item(index) | Returns the <option> element from the collection with the specified index
(starts at 0). Note: Returns null if the index number is out of range |
namedItem(id) | Returns the <option> element from the collection with the specified id. Note: Returns null if the id does not exist |
remove(index) | Removes the <option> element with the specified index from the collection |
DOM Version: | Core Level 2 Document Object |
---|---|
Return Value: | An HTMLOptionsCollection Object, representing all <option> elements in the <select> element. The elements in the collection are sorted as they appear in the source code |
[index]
Get the text of the first option (index 0) in a drop-down list:
The result of x will be:
item(index)
Get the text of the first option (index 0) in a drop-down list:
The result of x will be:
namedItem(id)
Get the text of the option with id="orange" in a drop-down list:
The result of x will be:
Add a "Kiwi" option at index position "1" in a drop-down list:
Remove the option with index "1" from a drop-down list:
Loop through all options in a drop-down list, and output the text of each option:
The result of txt will be:
Choose an option in the drop-down list and output the text of the selected option in an element with id="demo":
The result could be:
Change the options in a drop-down list depending on the selected option in another drop-down list: