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

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

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

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

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

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

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

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

กำหนดให้มี input และ select element ให้ผู้ใช้ป้อนตัวเลขลงใน input เมื่อ input สูญเสียโฟกัส (blur) ให้กำหนดให้รายการในลิสต์ ที่มีลำดับเท่ากับค่าที่ป้อนใน input ถูกเลือก

สร้าง dropdown list ที่มีชื่อวันในสัปดาห์ ใช้ JavaScript กำหนดให้รายการที่ถูกเลือกโดยค่าเริ่มต้น คือวันปัจจุบัน