La traduction chinoise de la collection d'options de liste de données HTML DOM est 'Collection d'options de liste de données HTML DOM'.-tutoriel HTML-php.cn

La traduction chinoise de la collection d'options de liste de données HTML DOM est 'Collection d'options de liste de données HTML DOM'.

WBOY

Libérer： 2023-09-02 11:09:14

avant

824 Les gens l'ont consulté

La collection d'options

HTML DOM Datalist est utilisée pour définir ou renvoyer la collection de valeurs d'option présentes dans l'élément HTML . Les éléments apparaissent dans le même ordre que dans le document.

Properties

Voici les propriétés de la collection d'options Datalist -

Property	Description
Length	Renvoie le nombre d'

Méthodes

Voici les méthodes de la collection d'options Datalist -

item(index)

Méthode	Description
[index] td>	Re se détourner de la collecte à l'index spécifié
Renvoie l'élément
namedItem(id)	Renvoie l'élément

Syntaxe

Voici la syntaxe de la collection d'options Datalist -

datalistObject.options

Copier après la connexion

Exemple

Voyons un exemple pour la collection d'options Datalist −

Démonstration

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

Copier après la connexion

Sortie

Cela produira la sortie suivante -

HTML DOM Datalist options Collection 的中文翻译是

Lorsque vous cliquez sur le bouton "Compter" (vous pouvez cliquer sur la liste de données pour compter vous-même le nombre d'éléments) -

La traduction chinoise de la collection d'options de liste de données HTML DOM est 'Collection d'options de liste de données HTML DOM'.

Nous créons une zone de saisie avec la valeur de liste d'attribut "fruits", lions-la à Liste de données avec le même identifiant. Cela signifie que lorsque nous tapons dans la zone de saisie, la liste de données tentera de compléter notre texte de saisie en utilisant les valeurs des options. Une liste de données avec l'identifiant « fruits » est créée avec quatre valeurs d'option. La liste de données et ses zones de saisie liées existent toutes dans le formulaire -

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

Copier après la connexion

Ensuite, nous créons un bouton COUNT qui exécutera la méthode elementNo() lorsque l'utilisateur clique dessus -

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

Copier après la connexion

elementNo() en utilisant la méthode getElementById() obtient la valeur de l'attribut options.length de la liste de données et l'affecte à la variable fLength. Affichez ensuite la valeur du nombre d'options dans le paragraphe avec l'ID "Sample" en utilisant son attribut innerHTML -

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!