HTML DOM Datalist options Collection

คอลเล็กชันตัวเลือก HTML DOM Datalist ใช้สำหรับการตั้งค่าหรือส่งคืนคอลเล็กชันค่าตัวเลือกที่มีอยู่ในองค์ประกอบ HTML องค์ประกอบจะปรากฏในลำดับเดียวกับที่อยู่ในเอกสาร

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติสำหรับคอลเลกชันตัวเลือก Datalist -

คุณสมบัติ	คำอธิบาย
ความยาว	หากต้องการส่งคืนจำนวน

วิธีการ

ต่อไปนี้เป็นวิธีการสำหรับการเก็บรวบรวมตัวเลือกดาต้าลิสต์ -

วิธีการ	คำอธิบาย
[ดัชนี]	หากต้องการส่งคืนองค์ประกอบ
รายการ(ดัชนี)	หากต้องการส่งคืนองค์ประกอบ
namedItem(id)	การส่งคืนองค์ประกอบ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคอลเลกชันตัวเลือก Datalist -

datalistObject.options

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับคอลเลกชันตัวเลือก 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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM Datalist options Collection

เมื่อคลิกปุ่ม COUNT (คุณสามารถคลิกที่ดาต้าลิสต์เพื่อนับองค์ประกอบได้ด้วยตัวเอง) -

HTML DOM Datalist options Collection

เราได้สร้างช่องป้อนข้อมูลที่มีค่ารายการแอตทริบิวต์ "ผลไม้" เพื่อเชื่อมโยงไปยังรายการข้อมูลที่มีรหัสเดียวกัน ซึ่งหมายความว่าเมื่อเราพิมพ์ในช่องป้อนข้อมูล datalist จะพยายามกรอกข้อความที่ป้อนด้วยค่าตัวเลือก รายการข้อมูลที่มีรหัส "ผลไม้" ถูกสร้างขึ้นและมีค่าตัวเลือกสี่ค่าอยู่ข้างใน ดาต้าลิสต์และกล่องอินพุตที่เชื่อมโยงมีอยู่ในรูปแบบ -

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

จากนั้นเราได้สร้างปุ่ม COUNT ที่จะรันเมธอด elementNo() เมื่อผู้ใช้คลิก -

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

เมธอด elementNo() รับค่าคุณสมบัติ options.length ของดาต้าลิสต์โดยใช้เมธอด getElementById() และกำหนดให้กับตัวแปร fLength ค่าการนับตัวเลือกจะแสดงในย่อหน้าด้วยรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -

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