การทำงานกับรายการแบบเลื่อนลงใน JavaScript

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

ลองมาดูวิธีการทำงานกับแท็กนี้ ผ่าน JavaScript กัน สมมติว่าเรามี รายการแบบเลื่อนลงดังนี้:

<select id="select">
	<option>one</option>
	<option selected>two</option>
	<option>three</option>
</select>

รับการอ้างอิงไปยัง select เข้าสู่ตัวแปร:

let select = document.querySelector('#select');

ทีนี้ เมื่อ select เปลี่ยนค่า ลองแสดง ข้อความของรายการที่เลือกออกทางหน้าจอ สำหรับสิ่งนี้ จำเป็นต้องอ่านคุณสมบัติ value ของ select ของเรา:

select.addEventListener('change', function(){
	console.log(this.value);
});

กำหนดให้มี select, ย่อหน้า และปุ่ม เมื่อคลิกปุ่ม ให้แสดงข้อความของรายการที่เลือกในย่อหน้า

สร้างรายการแบบเลื่อนลงของปีตั้งแต่ 2020 ถึง 2030 เมื่อเลือกรายการใดก็ตาม ให้แสดงข้อความว่า ปีนั้นเป็นปีอธิกสุรทินหรือไม่