Datalist options 集合

定義和用法

options ชุดที่กลับมา <datalist> องค์ประกอบ ทั้งหมดของตัวเลือก

หมายเหตุ:องค์ประกอบในชุดจะถูกจัด序ตามลำดับที่พวกเขาปรากฏในโค้ดต้นฐาน:

ดูเพิ่มเติมที่:

คู่มือการใช้งาน HTML:HTML <datalist> แท็ก

คู่มือการใช้งาน HTML:HTML <option> แท็ก

ตัวอย่าง

ตัวอย่าง 1

หาจำนวนตัวเลือกที่มีใน <datalist> ที่กำหนด:

var x = document.getElementById("browsers").options.length;

ลองทดสอบด้วยตัวเอง

ผลลัพธ์ของ x จะเป็น:

5

คำเตือน:มีตัวอย่างเพิ่มเติมใต้หน้านี้。

รูปแบบการใช้งาน

datalistObject.options

คุณสมบัติ

คุณสมบัติ รายละเอียด
length

กลับมาด้วยจำนวนของ <option> ในชุด:

หมายเหตุ:คุณสมบัตินี้เป็นคุณสมบัติที่อ่านได้เท่านั้น。

วิธี

วิธี รายละเอียด
[index]

จากชุดกลับมาด้วย <option> ที่มีดัชนีที่กำหนด (เริ่มต้นจาก 0):

หมายเหตุ:ถ้าเลขดัชนีหลังเล็กกว่าขององค์ประกอบจะกลับมาด้วย null。

item(index)

จากชุดกลับมาด้วย <option> ที่มีดัชนีที่กำหนด (เริ่มต้นจาก 0):

หมายเหตุ:ถ้าเลขดัชนีหลังเล็กกว่าขององค์ประกอบจะกลับมาด้วย null。

namedItem(id)

ที่มี id จากชุดในองค์ประกอบของ <option>:

หมายเหตุ:ถ้า id ถ้าไม่มีอยู่จะกลับมาด้วย null。

รายละเอียดเทคโนโลยี

DOM รุ่น: Core Level 2 Document Object
ค่าที่กลับมา:

HTMLCollection องค์ประกอบ ที่แสดงถึงทุกองค์ประกอบของ <datalist> ทั้งหมด <option> องค์ประกอบ.

องค์ประกอบในชุดจะถูกจัด序ตามลำดับที่พวกเขาปรากฏในโค้ดต้นฐาน:

สนับสนุนโปรแกรมนีเวอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน 10.0 สนับสนุน สนับสนุน สนับสนุน

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2: [index]

ดึงค่าของตัวเลือกแรกในรายการข้อมูล (ดัชนี 0):

var x = document.getElementById("browsers").options[0].value;

ลองทดสอบด้วยตัวเอง

ผลลัพธ์ของ x จะเป็น:

Internet Explorer

ตัวอย่าง 3: item(index)

ดึงค่าของตัวเลือกแรกในรายการข้อมูล (ดัชนี 0):

var x = document.getElementById("browsers").options.item(0).value;

ลองทดสอบด้วยตัวเอง

ผลลัพธ์ของ x จะเป็น:

Internet Explorer

ตัวอย่าง 4: namedItem(name_or_id)

ดึงค่าตัวเลือกของตัวเลือกที่มี id="google" ในรายการข้อมูล:

var x = document.getElementById("browsers").options.namedItem("google").value;

ลองทดสอบด้วยตัวเอง

ผลลัพธ์ของ x จะเป็น:

Chrome

ตัวอย่าง 5

ทำการวนลูปผ่านทุกตัวเลือกในรายการข้อมูลและแสดงค่าตัวเลือก:

var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.options.length; i++) {
  txt = txt + x.options[i].value + "<br>";
}

ลองทดสอบด้วยตัวเอง

ผลลัพธ์ของ txt จะเป็น:

Internet Explorer
Firefox
Chrome
Opera
Safari