Bộ sưu tập tùy chọn HTML DOM Datalist

Bộ sưu tập tùy chọn HTML DOM Datalist được sử dụng để thiết lập hoặc trả về bộ sưu tập giá trị tùy chọn có bên trong phần tử HTML . Các phần tử xuất hiện theo thứ tự giống như trong tài liệu.

Thuộc tính

Sau đây là thuộc tính cho Bộ sưu tập tùy chọn Datalist -

Thuộc tính	Mô tả
chiều dài	Để trả về số lượng phần tử

Phương pháp

Sau đây là các phương pháp cho bộ sưu tập tùy chọn Datalist -

Phương pháp	Mô tả
[index]	Để trả về phần tử
item (index)	Để trả về phần tử
namesItem (id)	Để trả về phần tử

Cú pháp

Sau đây là cú pháp cho Bộ sưu tập tùy chọn Datalist -

datalistObject.options

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho bộ sưu tập tùy chọn Datalist -

<!DOCTYPE html>
<html>
<body>
<h2>Datalist option elements example</h2>
<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>
<p>Click the below button to display the number of datalist option elements</p>
<button onclick="elementNo()">COUNT</button>
<p id="Sample"></p>
<script>
   function elementNo() {
      var fLength = document.getElementById("fruits").options.length;
      document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Bộ sưu tập tùy chọn HTML DOM Datalist

Khi nhấp vào nút ĐẾM (Bạn có thể nhấp vào danh sách dữ liệu để tự đếm các phần tử) -

Bộ sưu tập tùy chọn HTML DOM Datalist

Chúng tôi đã tạo một hộp đầu vào với giá trị danh sách thuộc tính “trái cây” để liên kết nó với kho dữ liệu có cùng id. Điều này có nghĩa là khi chúng ta nhập vào hộp nhập liệu, cơ sở dữ liệu sẽ cố gắng hoàn thành văn bản đầu vào của chúng ta với một giá trị tùy chọn. Một datalist với id là "fruit" được tạo ra và nó có bốn giá trị tùy chọn bên trong nó. Danh sách dữ liệu và hộp nhập được liên kết của nó đều có trong biểu mẫu -

<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>

Sau đó, chúng tôi đã tạo một nút COUNT sẽ thực thi phương thức elementNo () khi người dùng nhấp vào -

<button onclick="elementNo()">COUNT</button>

Phương thức elementNo () nhận giá trị thuộc tính options.length của datalist bằng cách sử dụng phương thức getElementById () và gán nó cho biến fLength. Sau đó, giá trị đếm tùy chọn được hiển thị trong đoạn có id “Mẫu” bằng cách sử dụng thuộc tính innerHTML -

function elementNo() {
   var fLength = document.getElementById("fruits").options.length;
   document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
}