基于AJAX的级联下拉菜单

AJAX（Asynchronous JavaScript and XML）是一种基于 JavaScript 和 XML 技术的网页异步通信技术，可以在不刷新整个页面的情况下，通过异步请求数据并更新页面内容。级联下拉菜单是指一个下拉菜单的选项内容会根据另一个下拉菜单的选项内容而变化。

实现基于 AJAX 的级联下拉菜单，需要以下步骤：

1. 在 HTML 页面中创建两个下拉菜单，一个用于选择第一级选项，另一个用于选择第二级选项。

<label>一级选项：</label>
<select id="first">
  <option value="0">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<br><br>
<label>二级选项：</label>
<select id="second">
  <option value="0">请选择</option>
</select>

2. 编写 JavaScript 代码，监听第一级下拉菜单的选项变化事件，当选项变化时，通过 AJAX 异步请求第二级下拉菜单的选项内容，并更新第二级下拉菜单的选项。

// 获取第一级下拉菜单和第二级下拉菜单
var first = document.getElementById('first');
var second = document.getElementById('second');
// 监听第一级下拉菜单的选项变化事件
first.onchange = function() {
  // 获取第一级下拉菜单当前选中的选项值
  var value = this.value;
  // 如果选择了“请选择”选项，则清空第二级下拉菜单的选项
  if (value === '0') {
    second.innerHTML = '<option value="0">请选择</option>';
    return;
  }
  // 创建 AJAX 请求对象
  var xhr = new XMLHttpRequest();
  // 设置请求方法和请求地址，注意后面需要加上一个随机数，避免浏览器缓存
  xhr.open('GET', 'server.php?pid=' + value + '&rnd=' + Math.random(), true);
  // 监听 AJAX 请求状态变化事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 如果 AJAX 请求成功，则获取服务器返回的数据，并更新第二级下拉菜单的选项
      var data = JSON.parse(xhr.responseText);
      var options = '<option value="0">请选择</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      }
      second.innerHTML = options;
    }
  };
  // 发送 AJAX 请求
  xhr.send();
};

3. 在服务器端编写代码，接收 AJAX 请求并返回第二级下拉菜单的选项内容。例如，如果使用 PHP 编写服务器端代码，则可以如下实现：

// 获取第一级选项的 ID
$pid = $_GET['pid'];
// 查询第二级选项的数据
$sql = "SELECT * FROM second WHERE pid = $pid";
$res = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_assoc($res)) {
  $data[] = $row;
}
// 返回 JSON 格式的数据
echo json_encode($data);