The Chinese translation of HTML DOM Datalist options Collection is 'HTML DOM Datalist options collection'-HTML Tutorial-php.cn

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

WBOY

Release： 2023-09-02 11:09:14

forward

843 people have browsed it

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

Copy after login

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>

Copy after login

Output

This will produce the following output-

HTML DOM Datalist options Collection 的中文翻译是

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>

Copy after login

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

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

Copy after login

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";
}

Copy after login

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!