HTML DOM Datalist 选项集合

htmlweb developmentfront end technology更新于 2024/6/1 17:48:17

HTML DOM Datalist 选项集合用于设置或返回 HTML <datalist> 元素中的选项值集合。这些元素的显示顺序与它们在文档中的顺序相同。

属性

以下是 Datalist 选项集合 − 的属性

属性	描述
length	返回 <option> 的数量集合中的元素。它是一个只读属性。

方法

以下是 Datalist 选项集合 − 的方法

方法	描述
[index]	返回集合中指定索引处的 <option> 元素。索引从 0 开始，如果索引号超出范围，则返回 null。
item(index)	返回 <option>从集合中返回具有给定索引的元素。索引从 0 开始，如果超出范围则返回 null。
namedItem(id)	返回集合中具有给定 id 的 <option> 元素。如果 id 不存在则返回 null。

语法

以下是 Datalist 选项集合 − 的语法

datalistObject.options

示例

让我们看一个 Datalist 选项集合的示例 −

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

输出

这将产生以下输出 −

点击 COUNT 按钮(您可以点击数据列表自行计算元素数量) −

我们创建了一个属性列表值为"fruits"的输入框，并将其链接到具有相同 ID 的数据列表。这意味着当我们在输入框中输入时，数据列表会尝试使用选项值来补全我们的输入文本。一个 ID 为"fruits"的数据列表被创建，其中包含四个选项值。数据列表及其链接的输入框都存在于表单中 −

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

然后，我们创建了一个按钮 COUNT，当用户点击 − 时，它将执行 elementNo() 方法。

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

elementNo() 方法使用 getElementById() 方法获取数据列表的 options.length 属性值，并将其赋值给变量 fLength。然后，选项计数值将使用其 innerHTML 属性显示在 id 为"Sample"的段落中 −

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