home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

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

เราจึงสร้างองค์ประกอบ <datalist> และตั้ง id ให้เป็นค่าเดียวกับที่เราจัดหาให้กล่องป้อนข้อมูลคือ "fruits" เราจึงสร้างองค์ประกอบ <option> สองตัวภายใน datalist โดยใช้เมธอด createElement() และผนวกองค์ประกอบเหล่านั้นกับ datalist โดยใช้เมธอด appendChild() และจัดหา id ของ datalist ให้กับมัน -

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); }