ajax联动下拉列表-示例代码

1、Ajax联动下拉列表是一种常见的网页交互技术，它可以实现当用户选择一个下拉列表的选项时，自动更新另一个下拉列表的内容。这种功能常用于省市区选择、商品分类选择等场景。

示例代码如下：

HTML部分：

<select id="province">
  <option value="">请选择省份</option>
  <option value="1">北京市</option>
  <option value="2">上海市</option>
  <option value="3">广东省</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>

JavaScript部分：

document.getElementById("province").addEventListener("change", function() {
  var provinceId = this.value;
  var citySelect = document.getElementById("city");
  // 清空城市下拉列表
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  // 发送Ajax请求获取对应省份的城市数据
  if (provinceId !== "") {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var cities = JSON.parse(xhr.responseText);
        // 根据返回的城市数据动态生成城市选项
        for (var i = 0; i < cities.length; i++) {
          var option = document.createElement("option");
          option.value = cities[i].id;
          option.textContent = cities[i].name;
          citySelect.appendChild(option);
        }
      }
    };
    xhr.open("GET", "/api/cities?provinceId=" + provinceId, true);
    xhr.send();
  }
});

以上代码实现了一个简单的省市联动下拉列表。当用户选择省份时，JavaScript代码会发送Ajax请求，根据选择的省份ID获取对应的城市数据。然后，根据返回的城市数据动态生成城市选项，更新城市下拉列表的内容。

请注意，示例代码中的Ajax请求是使用XMLHttpRequest对象发送的，请求的URL为"/api/cities"，并且附带了选择的省份ID作为参数。实际项目中，你需要根据自己的后端接口进行相应的修改。

示例代码中的省份和城市数据是硬编码在HTML中的，实际项目中你可能需要从数据库或其他数据源获取数据，并动态生成下拉列表的选项。