ajax三级联动下拉菜单

好的，我可以为您提供一个基于 AJAX 技术实现的三级联动下拉菜单的示例代码：

HTML 代码：

<select id="province">
  <option value="">请选择省份</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="district">
  <option value="">请选择区县</option>
</select>

JavaScript 代码：

// 获取省份列表
function getProvinceList() {
  $.ajax({
    url: 'province.php',
    type: 'get',
    dataType: 'json',
    success: function (data) {
      if (data.code === 0) {
        var provinces = data.provinces;
        for (var i = 0; i < provinces.length; i++) {
          var option = '<option value="' + provinces[i].id + '">' + provinces[i].name + '</option>';
          $('#province').append(option);
        }
      }
    }
  });
}

// 获取城市列表
function getCityList(provinceId) {
  $.ajax({
    url: 'city.php',
    type: 'get',
    dataType: 'json',
    data: {
      provinceId: provinceId
    },
    success: function (data) {
      if (data.code === 0) {
        var cities = data.cities;
        $('#city').empty().append('<option value="">请选择城市</option>');
        for (var i = 0; i < cities.length; i++) {
          var option = '<option value="' + cities[i].id + '">' + cities[i].name + '</option>';
          $('#city').append(option);
        }
      }
    }
  });
}

// 获取区县列表
function getDistrictList(cityId) {
  $.ajax({
    url: 'district.php',
    type: 'get',
    dataType: 'json',
    data: {
      cityId: cityId
    },
    success: function (data) {
      if (data.code === 0) {
        var districts = data.districts;
        $('#district').empty().append('<option value="">请选择区县</option>');
        for (var i = 0; i < districts.length; i++) {
          var option = '<option value="' + districts[i].id + '">' + districts[i].name + '</option>';
          $('#district').append(option);
        }
      }
    }
  });
}

// 页面加载时获取省份列表
$(function () {
  getProvinceList();
});

// 省份改变时获取城市列表
$('#province').change(function () {
  var provinceId = $(this).val();
  if (provinceId) {
    getCityList(provinceId);
  } else {
    $('#city').empty().append('<option value="">请选择城市</option>');
    $('#district').empty().append('<option value="">请选择区县</option>');
  }
});

// 城市改变时获取区县列表
$('#city').change(function () {
  var cityId = $(this).val();
  if (cityId) {
    getDistrictList(cityId);
  } else {
    $('#district').empty().append('<option value="">请选择区县</option>');
  }
});

以上代码实现了一个三级联动的下拉菜单，根据用户选择的省份、城市，动态加载对应的区县列表。您可以根据自己的需求进行修改和优化。同时，需要在后台编写对应的省份、城市、区县数据的接口。