query ajax 省市区联动菜单

省市区联动菜单是一个常见的前端应用场景，可以通过 AJAX 技术实现。下面是一种实现方式：

1. 在 HTML 页面中，定义三个下拉菜单，分别对应省、市、区：

<select id="province"></select>
<select id="city"></select>
<select id="district"></select>

2. 编写 JavaScript 代码，使用 AJAX 获取省份数据，并将其填充到省份下拉菜单中。例如，可以使用 jQuery 的 AJAX 函数：

$.ajax({
  url: 'url/to/get/provinces',
  type: 'GET',
  success: function(data) {
    // 将省份数据填充到下拉菜单中
    var provinceSelect = $('#province');
    $.each(data, function(index, province) {
      provinceSelect.append('<option value="' + province.id + '">' + province.name + '</option>');
    });
  }
});

3. 给省份下拉菜单添加 change 事件监听器，在省份变化时获取该省下的城市数据，并填充到城市下拉菜单中。例如：

$('#province').on('change', function() {
  var provinceId = $(this).val();
  $.ajax({
    url: 'url/to/get/cities?province_id=' + provinceId,
    type: 'GET',
    success: function(data) {
      // 将城市数据填充到下拉菜单中
      var citySelect = $('#city');
      citySelect.empty(); // 清空城市下拉菜单
      $.each(data, function(index, city) {
        citySelect.append('<option value="' + city.id + '">' + city.name + '</option>');
      });
    }
  });
});

4. 给城市下拉菜单添加 change 事件监听器，在城市变化时获取该城市下的区县数据，并填充到区县下拉菜单中。例如：

$('#city').on('change', function() {
  var cityId = $(this).val();
  $.ajax({
    url: 'url/to/get/districts?city_id=' + cityId,
    type: 'GET',
    success: function(data) {
      // 将区县数据填充到下拉菜单中
      var districtSelect = $('#district');
      districtSelect.empty(); // 清空区县下拉菜单
      $.each(data, function(index, district) {
        districtSelect.append('<option value="' + district.id + '">' + district.name + '</option>');
      });
    }
  });
});

5. 在服务器端，需要实现对应的接口，根据省份和城市 ID 获取相应的数据。具体实现方式因后台语言和数据源不同而异。