jQuery ajax+PHP实现的级联下拉列表框功能示例

下面是“jQuery ajax+PHP实现的级联下拉列表框功能示例”的完整攻略。

级联下拉列表框实现原理

级联下拉列表框是指一个下拉列表框的选项改变时，另一个下拉列表框的选项也相应改变。实现它的原理是通过jQuery的ajax请求与PHP后端的处理来实现动态的更新操作。具体过程如下：

1. 当第一个下拉列表框的选项改变时，绑定一个事件监听器。
2. 在监听器回调函数中，使用jQuery的ajax()函数和选中的选项参数向PHP后端发起一个POST请求。请求中包含所选参数值。
3. PHP后端接收到请求后，根据传递的参数值查询相应的数据，并返回需要更新的选项列表。
4. 在前端页面中，解析得到的选项数据，并使用Javascript更新第二个下拉列表框的选项列表。如果列表中已经有选中的项，更新后还需将其清空。

示例说明一

在实现级联下拉列表框功能的过程中，你需要在前端HTML中编写页面，并引入jQuery和PHP处理代码。首先，你需要在HTML页面中插入下面的代码：

<select id="province">
  <option value="">请选择</option>
  <option value="浙江">浙江省</option>
  <option value="广东">广东省</option>
</select>
<select id="city">
  <option value="">请选择</option>
</select>
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入公共JS -->
<script src="js/common.js"></script>

其中，第一个下拉列表框的ID为"province"，第二个下拉列表框的ID为"city"。在选择省份时，需加载对应的城市列表。

接下来，在公共JS文件"common.js"中编写jquery代码：

$(function() {
  $("#province").change(function() {
    var province = $(this).val();  // 获取所选省份的值
    if (province) {
      $.ajax({
        url: "getCity.php",  // 后端PHP文件的路径
        data: {province: province},  // 传参：所选省份名
        type: "POST",
        dataType: "json",
        success: function(data) {  // 请求成功时的处理函数
          var html = '<option value="">请选择</option>';
          for (var i = 0; i < data.length; i++) {
            html += '<option value="'+data[i]+'">'+data[i]+'</option>';
          }
          $("#city").html(html);  // 更新城市下拉列表框
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {  // 请求失败时的处理函数
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        }
      });
    } else {
      $("#city").html('<option value="">请选择</option>');
    }
  });
});

这段代码的作用是：当第一个下拉列表框的选项改变时，向PHP后端发起POST请求，并将所选省份的值传递过去。并根据得到的更新数据，用Javascript语言更新第二个下拉列表框的选项内容。

最后，在后端处理文件"getCity.php"中编写以下代码。

<?php
$province = $_POST['province'];  // 获取前端传过来的省份名

// 访问数据库，并查询对应的城市列表
$conn = mysqli_connect("localhost", "root", "password", "db");
mysqli_query($conn, "SET NAMES utf8");
$sql = "SELECT city FROM table WHERE province='".$province."'";
$result = mysqli_query($conn, $sql);
$res = array();
while ($row = mysqli_fetch_assoc($result)) {
  $res[] = $row['city'];
}

// 将城市列表以JSON格式返回给前端页面
echo json_encode($res);
?>

这段代码的作用是根据前端传来的省份信息，从数据库中查询出相应的城市列表，并以JSON格式将结果返回给前端。

示例说明二

我们也可以通过键盘的Enter事件，触发查询函数，实现级联下拉列表功能。实现方式如下：

<!-- 输入文本框 -->
<input type="text" id="text">
<!-- 城市下拉列表框 -->
<select id="city">
  <option value="">请选择</option>
</select>
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入公共JS -->
<script src="js/common.js"></script>

$(function() {
  $("#text").keydown(function(event) {
    if (event.keyCode == 13) {  // 监听Enter键
      var text = $(this).val();  // 获取输入文本的值
      if (text) {
        $.ajax({
          url: "getCityByKey.php",  // 后端PHP文件的路径
          data: {text: text},  // 传参：输入文本值
          type: "POST",
          dataType: "json",
          success: function(data) {  // 请求成功时的处理函数
            var html = '<option value="">请选择</option>';
            for (var i = 0; i < data.length; i++) {
              html += '<option value="'+data[i]+'">'+data[i]+'</option>';
            }
            $("#city").html(html);  // 更新城市下拉列表框
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {  // 请求失败时的处理函数
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
          }
        });
      } else {
        $("#city").html('<option value="">请选择</option>');
      }
    }
  });
});

这段代码的作用是：当用户输入完城市信息后，按下Enter键后，向PHP后端发起POST请求，并将所输入的文本值传递过去。并根据得到的更新数据，用Javascript语言更新第二个下拉列表框的选项内容。

最后，在后端处理文件"getCityByKey.php"中编写以下代码。

<?php
$key = $_POST['text'];  // 获取前端传过来的查询键值

// 访问数据库，并查询对应的城市列表
$conn = mysqli_connect("localhost", "root", "password", "db");
mysqli_query($conn, "SET NAMES utf8");
$sql = "SELECT city FROM table WHERE city LIKE '%".$key."%'";
$result = mysqli_query($conn, $sql);
$res = array();
while ($row = mysqli_fetch_assoc($result)) {
  $res[] = $row['city'];
}

// 将城市列表以JSON格式返回给前端页面
echo json_encode($res);
?>

这段代码的作用是根据用户输入的查询关键词，从数据库中查询出相应的城市列表，并以JSON格式将结果返回给前端。

以上就是“jQuery ajax+PHP实现的级联下拉列表框功能示例”的完整攻略，请仔细阅读。