ajax实现三级下拉列表源码

HTML代码：

<select id="province">
  <option value="">请选择省份</option>
  <option value="1">广东省</option>
  <option value="2">湖南省</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="area">
  <option value="">请选择区县</option>
</select>

JavaScript代码：

// 获取省份列表
function getProvinceList() {
  // 发送ajax请求获取省份列表
  $.ajax({
    url: '/api/province',
    type: 'GET',
    success: function (result) {
      if (result.code === 200) {
        var provinceList = result.data;
        // 更新省份下拉列表
        var provinceSelect = $('#province');
        provinceSelect.empty();
        provinceSelect.append('<option value="">请选择省份</option>');
        for (var i = 0; i < provinceList.length; i++) {
          provinceSelect.append('<option value="' + provinceList[i].id + '">' + provinceList[i].name + '</option>');
        }
      }
    }
  });
}

// 获取城市列表
function getCityList(provinceId) {
  // 发送ajax请求获取城市列表
  $.ajax({
    url: '/api/city',
    type: 'GET',
    data: {provinceId: provinceId},
    success: function (result) {
      if (result.code === 200) {
        var cityList = result.data;
        // 更新城市下拉列表
        var citySelect = $('#city');
        citySelect.empty();
        citySelect.append('<option value="">请选择城市</option>');
        for (var i = 0; i < cityList.length; i++) {
          citySelect.append('<option value="' + cityList[i].id + '">' + cityList[i].name + '</option>');
        }
        // 清空区县下拉列表
        var areaSelect = $('#area');
        areaSelect.empty();
        areaSelect.append('<option value="">请选择区县</option>');
      }
    }
  });
}

// 获取区县列表
function getAreaList(cityId) {
  // 发送ajax请求获取区县列表
  $.ajax({
    url: '/api/area',
    type: 'GET',
    data: {cityId: cityId},
    success: function (result) {
      if (result.code === 200) {
        var areaList = result.data;
        // 更新区县下拉列表
        var areaSelect = $('#area');
        areaSelect.empty();
        areaSelect.append('<option value="">请选择区县</option>');
        for (var i = 0; i < areaList.length; i++) {
          areaSelect.append('<option value="' + areaList[i].id + '">' + areaList[i].name + '</option>');
        }
      }
    }
  });
}

// 页面加载完成后执行
$(function () {
  // 获取省份列表
  getProvinceList();

  // 省份下拉列表改变事件
  $('#province').change(function () {
    var provinceId = $(this).val();
    if (provinceId) {
      // 获取城市列表
      getCityList(provinceId);
    } else {
      // 清空城市下拉列表和区县下拉列表
      var citySelect = $('#city');
      citySelect.empty();
      citySelect.append('<option value="">请选择城市</option>');
      var areaSelect = $('#area');
      areaSelect.empty();
      areaSelect.append('<option value="">请选择区县</option>');
    }
  });

  // 城市下拉列表改变事件
  $('#city').change(function () {
    var cityId = $(this).val();
    if (cityId) {
      // 获取区县列表
      getAreaList(cityId);
    } else {
      // 清空区县下拉列表
      var areaSelect = $('#area');
      areaSelect.empty();
      areaSelect.append('<option value="">请选择区县</option>');
    }
  });
});

说明：

1. HTML代码中，省份、城市、区县三个下拉列表分别设置id为province、city、area。
2. 页面加载完成后，调用getProvinceList函数获取省份列表。
3. 当省份下拉列表改变时，调用getCityList函数获取城市列表；当省份下拉列表选择“请选择省份”时，清空城市下拉列表和区县下拉列表。
4. 当城市下拉列表改变时，调用getAreaList函数获取区县列表；当城市下拉列表选择“请选择城市”时，清空区县下拉列表。
5. JavaScript代码中，使用jQuery库发送ajax请求，并更新下拉列表内容。具体的ajax请求地址和参数根据实际情况进行修改。