Datalist options Collection
Example
Find out how many options there are in a specific <datalist> element:
var x = document.getElementById("browsers").options.length;
The result of x will be:
5
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The options collection returns a collection of all the options in a <datalist> element.
Note: The elements in the collection are sorted as they appear in the source code.
Browser Support
| Collection | |||||
|---|---|---|---|---|---|
| options | Yes | Yes | Yes | Yes | Yes |
Note: The <datalist> element is not supported in Internet Explorer 9 (and earlier versions), or in Safari.
Syntax
datalistObject.options
Properties
| Property | Description |
|---|---|
| length | Returns the number of <option> elements in the collection. Note: This property is read-only |
Methods
| 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 |
| 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 |
Technical Details
| DOM Version: | Core Level 2 Document Object |
|---|---|
| Return Value: | An HTMLCollection Object, representing all <option> elements in the <datalist> element. The elements in the collection are sorted as they appear in the source code |
More Examples
Example
[index]
Get the value of the first option (index 0) in a datalist:
var x = document.getElementById("browsers").options[0].value;
The result of x will be:
Internet Explorer
Try it yourself »
Example
item(index)
Get the value of the first option (index 0) in a datalist:
var x = document.getElementById("browsers").options.item(0).value;
The result of x will be:
Internet Explorer
Try it yourself »
Example
namedItem(name_or_id)
Get the value of the option with id="google" in a datalist:
var x = document.getElementById("browsers").options.namedItem("google").value;
The result of x will be:
Chrome
Try it yourself »
Example
Loop through all options in a datalist, and output the option values:
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0;
i < x.options.length; i++) {
txt = txt + x.options[i].value + "<br>";
}
The result of txt will be:
Internet Explorer
Firefox
Chrome
Opera
Safari
Try it yourself »
Datalist Object
