ออบเจ็กต์ HTML DOM Datalist

ออบเจ็กต์ HTML DOM Datalist เชื่อมโยงกับองค์ประกอบ HTML5

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์ -

ในการสร้างวัตถุ 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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

ออบเจ็กต์ HTML DOM Datalist

หลังจากคลิกที่ปุ่ม CREATE -

ออบเจ็กต์ HTML DOM Datalist

ในตัวอย่างข้างต้น −

ขั้นแรกเราได้สร้างฟอร์มว่างด้วย id “FORM1” ซึ่งเราจะเพิ่ม datalist ในภายหลังโดยใช้วัตถุ datalist

<form id="FORM1"></form>

เราได้สร้างปุ่ม CREATE ที่จะเรียกใช้ฟังก์ชัน createData() เมื่อผู้ใช้คลิก

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

เมธอด createData() ได้สร้างองค์ประกอบอินพุตโดยใช้เมธอด createElement() ของออบเจ็กต์เอกสารและกำหนดให้กับตัวแปร i การใช้เมธอด setAttribute() เราสร้างรายการแอตทริบิวต์และกำหนดค่าผลไม้ แอตทริบิวต์ list นี้มีความสำคัญเนื่องจากจะเชื่อมโยงช่องใส่ของเรากับ datalist ของเรา จากนั้นกล่องอินพุตจะถูกผนวกเข้ากับแบบฟอร์มของเราโดยใช้เมธอด appendChild() และใส่ "FORM1" เป็นค่าพารามิเตอร์

จากนั้นเราสร้างองค์ประกอบ และตั้งค่า 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);
}