คอลเลกชัน options ของ HTML DOM Datalist

คอลเลกชัน options ของ HTML DOM Datalist ใช้สำหรับดึงหรือกำหนดคอลเลกชันของค่า <option> ที่อยู่ภายในองค์ประกอบ <datalist> ในเอกสาร HTML องค์ประกอบจะปรากฏในลำดับเดียวกับในเอกสาร

คุณสมบัติ (Properties)

เมธอด (Methods)

ไวยากรณ์ (Syntax)

datalistObject.options

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการนับจำนวน option ใน 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>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: ไม่แสดงจำนวน option หลังคลิกปุ่ม COUNT: แสดง "The datalist contains 4 options" (มี 4 option คือ Papaya, Strawberry, Guava, Mango)

คำอธิบายโค้ด:

1. สร้าง input box พร้อม attribute list="fruits" ลิงก์กับ datalist id="fruits"
2. datalist มี 4 option values ภายใน
3. สร้างปุ่ม COUNT เรียกฟังก์ชัน elementNo()
4. ฟังก์ชัน elementNo() ดึง options.length ของ datalist แสดงผลใน p#Sample

การใช้งาน datalist: ให้คำแนะนำอัตโนมัติ (autocomplete) สำหรับ input box ผู้ใช้พิมพ์บางส่วน datalist จะกรองตัวเลือกที่ตรงกัน