หมายเลขรายการที่เลือกใน dropdown list

ใน select element มีคุณสมบัติพิเศษชื่อ selectedIndex ซึ่งเก็บหมายเลข ของรายการในลิสต์ที่ถูกเลือกในปัจจุบัน โดยการนับลำดับจะเริ่มจากศูนย์ คุณสมบัตินี้สามารถอ่านค่าได้ และก็สามารถกำหนดค่าได้เช่นกัน เพื่อเปลี่ยนรายการที่ถูกเลือกในลิสต์

มาดูการทำงานกับคุณสมบัตินี้ผ่านตัวอย่าง สมมติว่าเรามี dropdown list ดังต่อไปนี้:

html<select id="select">
  <option value="one">หนึ่ง</option>
  <option value="two" selected>สอง</option>
  <option value="three">สาม</option>
</select>

ลองแสดงหมายเลขของรายการที่ถูกเลือกในลิสต์:

javascriptlet select = document.querySelector('#select');
console.log(select.selectedIndex); // จะแสดง 1

ทีนี้ลองเลือกรายการอื่น:

javascriptlet select = document.querySelector('#select');
select.selectedIndex = 2; // จะเลือก 'สาม'