如何使用 jQuery、AJAX、PHP 和 MySQL 填充依赖下拉列表？

使用 jQuery/AJAX 和 PHP/MySQL 根据第一个下拉列表选择填充第二个下拉列表

开发动态下拉菜单允许用户与表单交互更容易。本文演示了如何使用 jQuery/AJAX 和 PHP/MySQL 根据第一个下拉列表中所做的选择来填充第二个下拉列表。

HTML 代码创建两个下拉列表，第一个下拉列表在页面加载时填充。第二个下拉列表应根据第一个下拉列表中的选择显示选项。

PHP 代码查询数据库以生成包含第二个下拉列表值的 JSON 对象。然后将 JSON 对象传递给 jQuery/AJAX 请求。

$(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>');
      }
    });

  });
});

请注意，JSON 结果的格式应如下所示：

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

接收并解析 JSON 对象后在 JavaScript 中，选项会动态附加到第二个下拉列表中。这提供了一种用户友好的方式来根据之前的选择缩小选项范围。

以上是如何使用 jQuery、AJAX、PHP 和 MySQL 填充依赖下拉列表？的详细内容。更多信息请关注PHP中文网其他相关文章！