Javascript Reference - HTML DOM Datalist options Collection

The options collection returns all the options in a <datalist> element.

Browser Support


`options`	Yes	10.0	Yes	Yes	Yes

Syntax

var a = datalistObject.options;

Properties

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

Methods

Method	Description
[index]	Get element by index, index starts from 0.
item(index)	Get the element by index, starts at 0
namedItem(name_or_id)	Get the element by name or id attribute

Example

The following code shows how to loop through all options in a datalist, and output the option values.


<!DOCTYPE html>
<html>
<body>
<form>
  <input list="myList" name="browser">
  <datalist id="myList">
    <option value="A">
    <option value="B">
    <option value="C">
    <option value="D">
    <option value="E">
  </datalist>
</form><!--  ww w .  j av a 2  s . com-->
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myList");
    var txt = "";
    
    var i;
    for (i = 0; i < x.options.length; i++) {
        txt = txt + x.options[i].value + "<br/>";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to use get the number of options in a datalist.


<!DOCTYPE html>
<html>
<body>
<form>
  <input list="myList" name="myListInput">
  <datalist id="myList">
    <option value="A">
    <option value="B">
    <option value="C">
    <option value="D">
    <option value="E">
  </datalist>
</form><!--from  w  ww .j  a  v  a  2s. c o  m-->
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myList").options.length;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to use options[index] syntax to get the value of the first option (index 0) in a datalist.


<!DOCTYPE html>
<html>
<body>
<form>
  <input list="myList" name="myListInput">
  <datalist id="myList">
    <option value="A">
    <option value="B">
    <option value="C">
    <option value="D">
    <option value="E">
  </datalist>
</form><!-- ww  w . j av  a2s. co m-->
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myList").options[0].value;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to use .item(index) syntax to get the value of the first option (whose index is 0) in a datalist.


<!DOCTYPE html>
<html>
<body>
<form>
  <input list="myList" name="myListInput">
  <datalist id="myList">
    <option value="A">
    <option value="B">
    <option value="C">
    <option value="D">
    <option value="E">
  </datalist>
</form><!--   w  ww .j av  a2  s  .c  o m-->
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myList").options.item(0).value;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to use namedItem(name_or_id) method to get the value of the option whose id is "c" in a datalist


<!DOCTYPE html>
<html>
<body>
<form>
  <input list="myList" name="myListInput">
  <datalist id="myList">
    <option value="A">
    <option value="B">
    <option id="c" value="C">
    <option value="D">
    <option value="E">
  </datalist>
</form><!-- w w w  .j a v  a  2  s  .co  m-->
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myList").options.namedItem("c").value;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows: