วิธีแสดงตัวเลือกทั้งหมดจาก Dropdown List ด้วย JavaScript

หากต้องการแสดงตัวเลือกทั้งหมดจาก Dropdown List ให้ใช้คุณสมบัติ options คุณสมบัตินี้ช่วยเข้าถึงตัวเลือกทั้งหมดพร้อมกับ length

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อดึงตัวเลือกทั้งหมดจาก Drop-down List:

<!DOCTYPE html>
<html>
  <body>
    <form id="myForm">
      <select id="selectNow">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
      <input type="button" onclick="display()" value="Click">
    </form>
    <p>Click the button to get all the options</p>
    <script>
      function display() {
        var a, i, options;
        a = document.getElementById("selectNow");
        options = "";
        for (i = 0; i < a.length; i++) {
          options = options + "<br> " + a.options[i].text;
        }
        document.write("DropDown Options: "+options);
      }
    </script>
  </body>
</html>

select.options คืน HTMLOptionsCollection ของทุก <option> ใช้ .length นับจำนวน และวนลูปเข้าถึง options[i].text (ข้อความแสดง) หรือ options[i].value (ค่า) สามารถใช้ for...of ใน ES6+ ได้ง่ายขึ้น