如何使用 jQuery、AJAX、PHP 和 MySQL 填入依賴下拉清單？

使用jQuery/AJAX 和PHP/MySQL 根據第一個下拉清單選擇填充第二個下拉清單

開發動態選單選擇填充第二個下拉清單

開發動態功能表允許使用者與表單互動更容易。本文示範如何使用 jQuery/AJAX 和 PHP/MySQL 根據第一個下拉清單中所做的選擇來填入第二個下拉清單。

HTML 程式碼建立兩個下拉列表，第一個下拉列表在頁面載入時填入。第二個下拉清單應根據第一個下拉清單中的選擇顯示選項。

$(function() {

  $("#item_1").change(function() {

    var group_id = $(this).val();

    $.ajax({
      type: "POST",
      url: "../../db/groups.php?item_1_id=" + group_id,
      dataType: "json",
      success: function(data) {
        // Clear options corresponding to earlier option of first dropdown
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Select Option</option>');
        // Populate options of the second dropdown
        $.each(data.subjects, function(i, val) {
          $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
        });
        $('select#item_2').focus();
      },
      beforeSend: function() {
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Loading...</option>');
      },
      error: function() {
        $('select#item_2').attr('disabled', true);
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">No Options</option>');
      }
    });

  });
});

PHP 程式碼查詢資料庫以產生包含第二個下拉清單值的 JSON 物件。然後將 JSON 物件傳遞給 jQuery/AJAX 請求。

[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]

請注意，JSON 結果的格式應如下所示：

接收並解析JSON 物件後在JavaScript 中，選項會動態附加到第二個下拉列表中。這提供了一種用戶友好的方式來根據先前的選擇縮小選項範圍。

以上是如何使用 jQuery、AJAX、PHP 和 MySQL 填入依賴下拉清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！