Đối tượng HTML DOM Datalist được liên kết với phần tử
Cú pháp
Sau đây là cú pháp -
Để tạo đối tượng Datalist -
var p = document.createElement("DATALIST"); Để truy cập đối tượng Datalist -
var p = document.getElementById("demoDatalist"); Ví dụ
Chúng ta hãy xem một ví dụ cho đối tượng 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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Sau khi nhấp vào nút TẠO -
Trong ví dụ trên -
Đầu tiên, chúng tôi đã tạo một biểu mẫu trống với id “FORM1”, trong đó chúng tôi sẽ thêm một danh sách dữ liệu sau bằng cách sử dụng đối tượng danh sách dữ liệu.
<form id="FORM1"></form>
Chúng tôi đã tạo một nút CREATE sẽ thực thi hàm createData () khi người dùng nhấp vào.
<button onclick="createData()">CREATE</button>
Phương thức createData () đầu tiên tạo một phần tử đầu vào bằng phương thức createElement () của đối tượng tài liệu và gán nó cho biến i. Sử dụng phương thức setAttribute (), chúng ta tạo thuộc tính list và gán giá trị cho nó. Thuộc tính danh sách này rất quan trọng vì nó liên kết hộp đầu vào của chúng tôi với danh sách dữ liệu của chúng tôi. Sau đó, hộp nhập liệu được thêm vào biểu mẫu của chúng tôi bằng phương thức appendChild () và cung cấp cho nó “FORM1” dưới dạng giá trị tham số.
Sau đó, chúng tôi tạo phần tử
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);
}