Datalist optionsCollection
Datalist ObjectExample
Loop through all options of the datalist control and output the option values:
var x = document.getElementById("mySelect");
var txt = "";
for (var i = 0; i < x.options.length; i++)
{
txt = txt + x.options[i].value + "<br>";
}
var txt = "";
for (var i = 0; i < x.options.length; i++)
{
txt = txt + x.options[i].value + "<br>";
}
txtThe output result is:
Internet Explorer
Firefox
Chrome
Opera
Safari
Firefox
Chrome
Opera
Safari
Try it Yourself »
Definition and Usage
The options collection returns a collection of all options in the datalist.
Note:The elements in the collection are sorted according to their position in the code.
Browser Support
All major browsers support the options collection.
Syntax
datalistObject.options
Properties
| Property | Description |
|---|---|
| length | Returns the number of option elements in the collection. |
Methods
| Method | Description |
|---|---|
| [index] | An integer that specifies the element to retrieve (starts at 0). |
| item(index) | Returns the element at the specified index from the collection (starts at 0). |
| namedItem(name_or_id) | Returns the element from the collection with the specified name (name or id attribute). |
More Examples
Example
Display the number of datalist elements:
var x = document.getElementById("browsers").options.length;
xThe output result is:
5
Try it Yourself »
Example
[index]
Return the value of the first option (index 0) in the datalist:
var x = document.getElementById("browsers").options[0].value;
xThe output result is:
Internet Explorer
Try it Yourself »
Example
item(index)
Return the value of the first option (index 0) in the datalist:
var x = document.getElementById("browsers").options.item(0).value;
xThe output result is:
Internet Explorer
Try it Yourself »
Example
namedItem(name_or_id)
Return the value of the option with id="google" in the datalist:
var x = document.getElementById("browsers").options.namedItem("google").value;
xThe output result is:
Chrome
Try it Yourself »
Other Extensions