Datalist options collection

HTML DOM Datalist Object

Definition and Usage

options The set returns <datalist> element All options in.

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

See also:

HTML Reference Manual:HTML <datalist> Tag

HTML Reference Manual:HTML <option> Tag

Instance

Example 1

Find out how many options there are in the specified <datalist>:

var x = document.getElementById("browsers").options.length;

Try it yourself

The result of x will be:

5

Tip:More examples are provided below the page.

Syntax

datalistObject.options

Property

Property Description
length

Returns the number of <option> elements in the set.

Note:This property is read-only.

Method

Method Description
[index]

Returns the <option> element with the specified index (starting from 0) from the set.

Note:Returns null if the index number is out of range.
item(index)

Returns the <option> element with the specified index (starting from 0) from the set.

Note:Returns null if the index number is out of range.
namedItem(id)

With specified id Returns the <option> element from the set.

Note:If id Returns null if not present.

Technical details

DOM version: Core Level 2 Document Object
Return value:

HTMLCollection object, representing all <option> element.

The elements in the set are sorted in the order they appear in the source code.

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 10.0 Support Support Support

More examples

Example 2: [index]

Get the value of the first option in the data list (index 0):

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

Try it yourself

The result of x will be:

Internet Explorer

Example 3: item(index)

Get the value of the first option in the data list (index 0):

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

Try it yourself

The result of x will be:

Internet Explorer

Example 4: namedItem(name_or_id)

Get the value of the option with id="google" in the data list:

var x = document.getElementById("browsers").options.namedItem("google").value;

Try it yourself

The result of x will be:

Chrome

Example 5

Loop through all options in the data list and output the option value:

var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.options.length; i++) {
  txt = txt + x.options[i].value + "<br>";
}

Try it yourself

The result of txt will be:

Internet Explorer
Firefox
Chrome
Opera
Safari

HTML DOM Datalist Object