search

Home >Web Front-end >HTML Tutorial >The Chinese translation of HTML DOM Datalist options Collection is 'HTML DOM Datalist options collection'

The Chinese translation of HTML DOM Datalist options Collection is 'HTML DOM Datalist options collection'

WBOY
WBOYforward
2023-09-02 11:09:14908browse

HTML DOM Datalist options collection is used to set or return the collection of option values ​​present in the HTML element. Elements appear in the same order as in the document.

Properties

The following are the properties of the Datalist option collection-

Properties Description
Length Returns the number of

Method

The following are the methods of Datalist option collection-

item(index)
Method Description
[index] td> Returns the
Returns the
namedItem(id) Returns the

Syntax

The following is the syntax for a collection of data list options -

datalistObject.options

Example

Let’s look at one Example on Datalist option collection −

Demonstration

<!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-

HTML DOM Datalist options Collection 的中文翻译是 "HTML DOM 数据列表选项集合"

Single When clicking the "Count" button (you can click on the data list to count the number of elements yourself) -

The Chinese translation of HTML DOM Datalist options Collection is 'HTML DOM Datalist options collection'

We create an input box with the attribute list value "fruits", Link it to a list of data with the same id. This means that when we type in the input box, the data list will try to complete our input text using the option values. A data list with the id "fruits" is created with four option values. The data list and its linked input boxes all exist within the form-

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

Then we create a button COUNT, and when the user clicks the button, the elementNo() method will be executed-

<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. Then display the option count value in the paragraph with ID "Sample" using its innerHTML attribute -

function elementNo() {
   var fLength = document.getElementById("fruits").options.length;
   document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
}

The above is the detailed content of The Chinese translation of HTML DOM Datalist options Collection is 'HTML DOM Datalist options collection'. For more information, please follow other related articles on the PHP Chinese website!

html NULL count Length Collection dom innerHTML td th
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Execute script when HTML element loses focus?Next article：Execute script when HTML element loses focus?

Related articles

See more