Collection options của Datalist HTML DOM được dùng để thiết lập hoặc trả về tập hợp giá trị option có mặt bên trong phần tử HTML <datalist>. Các phần tử xuất hiện theo cùng thứ tự như chúng trong tài liệu.
Thuộc tính
Sau đây là thuộc tính cho Collection options của Datalist:
| Thuộc tính | Mô tả |
|---|---|
| length | Để trả về số lượng phần tử <option> trong collection. Đây là thuộc tính chỉ đọc. |
Phương thức
Sau đây là các phương thức cho Collection options của Datalist:
| Phương thức | Mô tả |
|---|---|
| [index] | Để trả về phần tử <option> từ collection tại chỉ mục được chỉ định. Chỉ mục bắt đầu từ 0 và null được trả về nếu số chỉ mục ngoài phạm vi. |
| item(index) | Để trả về phần tử <option> từ collection với chỉ mục cho trước. Chỉ mục bắt đầu từ 0 và null được trả về nếu nó ngoài phạm vi. |
| namedItem(id) | Để trả về phần tử <option> từ collection với id cho trước. Null được trả về nếu id không tồn tại. |
Cú pháp
Cú pháp sau đây dùng cho Collection options của Datalist:
datalistObject.options
Ví dụ
Hãy xem một ví dụ cho Collection options của Datalist:
<!DOCTYPE html> <html> <body> <h2>Ví dụ phần tử option của Datalist</h2> <form> <input list="fruits"> <datalist id="fruits"> <option value="Đu đủ"> <option value="Dâu tây"> <option value="Ổi"> <option value="Xoài"> </datalist> </form> <p>Nhấn nút bên dưới để hiển thị số lượng phần tử option của datalist</p> <button onclick="elementNo()">ĐẾM</button> <p id="Sample"></p> <script> function elementNo() { var fLength = document.getElementById("fruits").options.length; document.getElementById("Sample").innerHTML = "Datalist chứa " + fLength + " options"; } </script> </body> </html>Kết quả
Điều này sẽ tạo ra kết quả sau:
Khi nhấn nút ĐẾM (Bạn có thể nhấp vào datalist để tự đếm các phần tử):
Chúng ta đã tạo một hộp nhập liệu với giá trị thuộc tính list là "fruits" để liên kết nó với datalist có cùng id. Điều này có nghĩa là khi chúng ta gõ trong hộp nhập liệu, datalist 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ị option. Một datalist với id "fruits" được tạo và nó có bốn giá trị option bên trong nó. Datalist và hộp nhập liệu được liên kết của nó đều có mặt bên trong form:
<form> <input list="fruits"> <datalist id="fruits"> <option value="Đu đủ"> <option value="Dâu tây"> <option value="Ổi"> <option value="Xoài"> </datalist> </form>
Chúng ta đã tạo nút ĐẾM sẽ thực thi phương thức elementNo() khi được nhấp bởi người dùng:
<button onclick="elementNo()">ĐẾM</button>
Phương thức elementNo() lấy giá trị thuộc tính options.length của datalist bằng phương thức getElementById() và gán nó cho biến fLength. Giá trị đếm option sau đó được hiển thị trong đoạn văn với id "Sample" bằng thuộc tính innerHTML của nó:
function elementNo() { var fLength = document.getElementById("fruits").options.length; document.getElementById("Sample").innerHTML = "Datalist chứa " + fLength + " options"; }