資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML DOM Datalist 物件
HTML DOM Datalist 物件與 HTML5 <datalist> 元素相關。
語法
語法如下 −
建立 Datalist 物件 −
var p = document.createElement("DATALIST");訪問 Datalist 物件 −
var p = document.getElementById("demoDatalist");示例
我們來看一個 HTML DOM Datalist 物件的示例 −
<!DOCTYPE html>
<html>
<head>
<title>DATALIST</title>
<style>
button{
margin-top:90px;
}
</style>
</head>
<body>
<h2>Datalist object example</h2>
<p>Click the below button to create a datalist element with options</p>
<form id="FORM1">
</form>
<button onclick="createData()">CREATE</button>
<script>
function createData() {
var i = document.createElement("INPUT");
i.setAttribute("list", "fruits");
document.getElementById("FORM1").appendChild(i);
var y = document.createElement("DATALIST");
y.setAttribute("id", "fruits");
document.getElementById("FORM1").appendChild(y);
var fruit1 = document.createElement("OPTION");
fruit1.setAttribute("value", "mango");
document.getElementById("fruits").appendChild(fruit1);
var fruit2 = document.createElement("OPTION");
fruit2.setAttribute("value", "papaya");
document.getElementById("fruits").appendChild(fruit2);
}
</script>
</body>
</html>輸出
它將生成以下輸出 −
點選 CREATE 按鈕後 −
在上面的示例中 −
首先，我們建立了一個空表單，其 id 為 “FORM1”，稍後我們將使用 datalist 物件 在其中新增一個 datalist。
<form id="FORM1"></form>
我們建立了一個按鈕 CREATE，使用者單擊後將執行 createData() 函式。
<button onclick="createData()">CREATE</button>
createData() 方法首先使用 document 物件的 createElement() 方法建立一個 input 元素，並將其賦值給變數 i。使用 setAttribute() 方法，我們建立了 list 屬性，併為其賦予 fruits 值。此 list 屬性很重要，因為它將我們的 input 框連結到我們的 datalist。然後使用 appendChild() 方法將輸入框附加到我們的表單，並提供 “FORM1” 作為引數值。
然後我們建立 <datalist> 元素，並將其 id 設定為我們提供的與輸入框相同的 id，即“fruits”。然後，我們使用 createElement() 方法在 datalist 內部建立兩個 <option> 元素，並使用 appendChild() 方法將這些元素追加到 datalist 中，並向其提供 datalist 的 id −
function createData() {
var i = document.createElement("INPUT");
i.setAttribute("list", "fruits");
document.getElementById("FORM1").appendChild(i);
var y = document.createElement("DATALIST");
y.setAttribute("id", "fruits");
document.getElementById("FORM1").appendChild(y);
var fruit1 = document.createElement("OPTION");
fruit1.setAttribute("value", "mango");
document.getElementById("fruits").appendChild(fruit1);
var fruit2 = document.createElement("OPTION");
fruit2.setAttribute("value", "papaya");
document.getElementById("fruits").appendChild(fruit2);
}
更新於： 20-Feb-2021
183 次瀏覽
廣告