HTML DOM Datalist options Collection 的中文翻譯是 'HTML DOM 資料清單選項集合'-html教學-PHP中文網

HTML DOM Datalist options Collection 的中文翻譯是 'HTML DOM 資料清單選項集合'

WBOY

發布： 2023-09-02 11:09:14

轉載

603 人瀏覽過

HTML DOM Datalist 選項集合用於設定或傳回 HTML 元素中存在的選項值集合。元素的顯示順序與文件中的順序相同。

屬性

以下是Datalist 選項集合的屬性-

##描述傳回集合中

屬性
長度	元素的數量。它是一個只讀屬性。

方法

以下是Datalist 選項集合的方法-

##方法[index]item(index)從給定索引的集合中傳回元素。索引從0開始，如果超出範圍則傳回null。 namedItem(id) 元素。如果 id 不存在，則傳回 Null。語法

說明
#從指定索引處的集合中傳回 td>元素。索引從0開始，如果索引號碼超出範圍，則傳回null。

從給定 id 的集合中傳回

以下是資料清單選項集合的語法-

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>

登入後複製

輸出

這將產生以下輸出-

##單擊「計數」按鈕時（您可以點擊資料清單自行計算元素數量）- HTML DOM Datalist options Collection 的中文翻译是

我們建立了一個帶有屬性清單值「fruits」的輸入框，將其連結到具有相同id 的資料列表。這意味著當我們在輸入框中鍵入時，資料列表將嘗試使用選項值來完成我們的輸入文字。建立了一個 id 為「fruits」的資料列表，其中有四個選項值。資料清單及其連結的輸入框都存在於表單內- HTML DOM Datalist options Collection 的中文翻譯是 'HTML DOM 資料清單選項集合'

<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() 方法取得datalist 的options.length 屬性值，並將其指派給變數fLength。然後使用其innerHTML屬性將選項計數值顯示在ID為「Sample」的段落中 -

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

登入後複製

以上是HTML DOM Datalist options Collection 的中文翻譯是 'HTML DOM 資料清單選項集合'的詳細內容。更多資訊請關注PHP中文網其他相關文章！