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>

输出

这将产生以下输出 −

点击"创建"按钮后 −

在上面的例子中 −

我们首先创建了一个 ID 为"FORM1"的空表单，稍后我们将使用 datalist 对象在其中添加数据列表。

<form id="FORM1></form>

我们创建了一个 CREATE 按钮，当用户点击该按钮时，它将执行 createData() 函数。

<button onclick="createData()>CREATE</button>

createData() 方法首先使用 document 对象的 createElement() 方法创建一个输入元素，并将其赋值给变量 i。然后，我们使用 setAttribute() 方法创建列表属性，并将其赋值给 fruit。这个列表属性非常重要，因为它将输入框链接到数据列表。然后，使用 appendChild() 方法将输入框附加到表单，并将"FORM1"作为参数值传入。

接下来，我们创建 <datalist> 元素，并将其 id 设置为我们传入输入框的值，即"fruits"。然后，我们使用 createElement() 方法在数据列表中创建两个 <option> 元素，并使用 appendChild() 方法将这些元素附加到数据列表中，并向其提供数据列表的 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);
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/