HTML DOM Datalist options Collection


The HTML DOM Datalist options collection is used for setting or returning the option value collection that are present inside the HTML <datalist> element. The elements appear in the same order as they are in the document.

Properties

Following is the property for the Datalist options Collection −

PropertyDescription
lengthTo return the number of <option> elements in the collection.It is a read-only property.

Methods

Following are the methods for the Datalist options collection −

MethodDescription
[index]To return the <option> element from the collection present at the specified index.Indexing starts from 0 and null is returned if the index number is out of range.
item(index)To return the <option> element from the collection with the given index.Indexing starts at 0 and null is returned if its out of range.
namedItem(id)To return the <option> element from the collection with the given id.Null is returned if the id doesn’t exist.

Syntax

Following is the syntax for the Datalist options Collection −

datalistObject.options

Example

Let us look at an example for the Datalist options collection −

<!DOCTYPE html>
<html>
<body>
<h2>Datalist option elements example</h2>
<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>
<p>Click the below button to display the number of datalist option elements</p>
<button onclick="elementNo()">COUNT</button>
<p id="Sample"></p>
<script>
   function elementNo() {
      var fLength = document.getElementById("fruits").options.length;
      document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the COUNT button (You can click on the datalist to count the elements yourself) −

We have created an input box with attribute list value “fruits” to link it to the datalist with the same id. This means when we type in the input box the datalist will try to complete our input text with an option value. A datalist with id “fruits” is created and it has four option values inside it. The datalist and its linked input box are both present inside the form −

<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>

We have then created a button COUNT that will execute the elementNo() method when clicked by the user −

<button onclick="elementNo()">COUNT</button>

The elementNo() method gets the options.length property value of the datalist by using the getElementById() method and assigns it to the variable fLength. The option count value is then displayed in the paragraph with id “Sample” using its innerHTML property −

function elementNo() {
   var fLength = document.getElementById("fruits").options.length;
   document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
}
raja
Published on 08-Aug-2019 13:45:07
Advertisements