X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Datalist options Collection

Datalist Object Reference Datalist Object

Example

Loop through all options in a datalist, 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>";
}

The result of txt will be:

Internet Explorer
Firefox
Chrome
Opera
Safari

Try it yourself »


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

Internet Explorer Firefox Opera Google Chrome Safari

The options collection is supported in all major browsers.

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

Methods

Method Description
[index] An integer that specifies the element to retrieve (starts at 0)
item(index) Returns the element from the collection with the specified index (starts at 0)
namedItem(name_or_id) Returns the element from the collection with the specified name (name or id attribute)


More Examples

Example

Show the number of options in a datalist:

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

The result of x will be:

5

Try it yourself »

Example

[index]

Return 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)

Return 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)

Return 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 »


Datalist Object Reference Datalist Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook