สร้างเมนู Select แบบไดนามิกจาก JSON ด้วย jQuery

โค้ดนี้เป็นตัวอย่างการสร้างรายการตัวเลือกในแท็ก <select> ของ HTML แบบอัตโนมัติ โดยใช้ข้อมูลจาก JSON ร่วมกับ jQuery เมื่อหน้าเว็บถูกโหลด ระบบจะวนลูปอ่านข้อมูลจาก JSON array ที่มีค่า id และ name จากนั้นสร้างแท็ก <option> และเพิ่มเข้าไปใน <select> โดยกำหนดค่า value จาก id และแสดงข้อความจาก name

เหมาะสำหรับการพัฒนาแบบฟอร์มที่ต้องดึงข้อมูลแบบไดนามิก เช่น ข้อมูลจาก API หรือฐานข้อมูล

<label for="groupSelect">Choose a group:</label>
  <select id="groupSelect"></select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// Your JSON data
    const data = [
      { "id": "1", "name": "Group 1" },
      { "id": "2", "name": "Group 2" },
      { "id": "3", "name": "Group 3" },
      { "id": "4", "name": "Group 4" },
      { "id": "5", "name": "Group 5" },
      { "id": "6", "name": "Group 6" },
      { "id": "7", "name": "Group 7" },
      { "id": "8", "name": "Group 8" },
      { "id": "9", "name": "Group 9" }
    ];

    // Populate the select
    $(function() {
      const $select = $("#groupSelect");
      $.each(data, function(_, item) {
        $select.append($("<option>", {
          value: item.id,
          text: item.name
        }));
      });
    });