Easy Tutorial
❮ Prop Nav Geolocation Prop Style Left ❯

Datalist options Collection

Datalist Object

Example

Iterate through all options of a 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>";
}

txt output result:

Internet Explorer
Firefox
Chrome
Opera
Safari

Definition and Usage

The options collection returns a collection of all the options in a datalist.

Note: The elements in the collection are sorted in the order they appear in the source code.


Browser Support

All major browsers support the options collection.


Syntax

Properties

Property Description
length Returns the number of option elements in the collection

Methods

Method Description
[index] An integer specifying the element to retrieve (starting from 0)
item(index) Returns the element at the specified index from the collection (starting from 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;

x output result:

5

Example

Return the value of the first option (index 0) in the datalist:

var x = document.getElementById("browsers").options[0].value;

x output result:

Internet Explorer

Example

item(index)

Return the value of the first option (index 0) in the datalist:

var x = document.getElementById("browsers").options.item(0).value;

x output result:

Internet Explorer

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;

x output result:

Chrome

Datalist Object

❮ Prop Nav Geolocation Prop Style Left ❯