数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究HTML DOM Datalist 选项集合
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”按钮（您也可以单击数据列表自己计算元素）：
我们创建了一个带有属性 list 值“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";
}
更新于： 2021年2月20日
359 次浏览
广告