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

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

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

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

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

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

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

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