วิธีเลือกหลายตัวเลือกใน Dropdown List ด้วย JavaScript

หากต้องการเลือกหลายตัวเลือกใน Drop-down List ให้ใช้คุณสมบัติ multiple คุณสมบัตินี้อนุญาตให้เลือกได้มากกว่าหนึ่งตัวเลือกโดยกดปุ่ม CTRL ค้างไว้

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อเรียนรู้วิธีเลือกหลายตัวเลือกพร้อมกันใน Dropdown List:

<!DOCTYPE html>
<html>
  <body>
    <form id="myForm">
      <select id="mySelect">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
      <input type="button" onclick="multipleFunc()" value="Select multiple options">
    </form>
    <p>Press CTRL and click above button to select multiple options at once.</p>
    <script>
      function multipleFunc() {
        document.getElementById("mySelect").multiple = true;
      }
    </script>
  </body>
</html>

คำอธิบาย: select.multiple = true ทำให้ <select> กลายเป็น Multi-select (แสดงเป็น List box แทน Dropdown) ผู้ใช้เลือกได้หลายรายการด้วย Ctrl+Click (Windows/Linux) หรือ Cmd+Click (Mac) และ Shift+Click สำหรับเลือกช่วง เพื่อดึงค่าที่เลือกหลายค่า ใช้ Array.from(select.selectedOptions).map(o => o.value)