資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
廣告