jquery ajax 省市县,jquery+ajax实现省市区三级联动效果简单示例

以下是一个简单的基于 jQuery 和 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() {
  // 加载省份列表
  $.ajax({
    url: 'province.php',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      $.each(data, function(index, province) {
        $('#province').append('<option value="' + province.id + '">' + province.name + '</option>');
      });
    }
  });

  // 加载城市列表
  $('#province').change(function() {
    var provinceId = $(this).val();
    if (provinceId != '') {
      $.ajax({
        url: 'city.php',
        type: 'GET',
        dataType: 'json',
        data: {provinceId: provinceId},
        success: function(data) {
          $('#city').empty().append('<option value="">请选择城市</option>');
          $('#district').empty().append('<option value="">请选择区县</option>');
          $.each(data, function(index, city) {
            $('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
          });
        }
      });
    } else {
      $('#city').empty().append('<option value="">请选择城市</option>');
      $('#district').empty().append('<option value="">请选择区县</option>');
    }
  });

  // 加载区县列表
  $('#city').change(function() {
    var cityId = $(this).val();
    if (cityId != '') {
      $.ajax({
        url: 'district.php',
        type: 'GET',
        dataType: 'json',
        data: {cityId: cityId},
        success: function(data) {
          $('#district').empty().append('<option value="">请选择区县</option>');
          $.each(data, function(index, district) {
            $('#district').append('<option value="' + district.id + '">' + district.name + '</option>');
          });
        }
      });
    } else {
      $('#district').empty().append('<option value="">请选择区县</option>');
    }
  });
});

省份列表数据接口（province.php）返回 JSON 数据格式：

[
  {"id": "110000", "name": "北京市"},
  {"id": "120000", "name": "天津市"},
  // 省份数据...
]

城市列表数据接口（city.php）根据省份 ID 返回 JSON 数据格式：

[
  {"id": "110100", "name": "北京市"},
  {"id": "110200", "name": "县城市"},
  // 城市数据...
]

区县列表数据接口（district.php）根据城市 ID 返回 JSON 数据格式：

[
  {"id": "110101", "name": "东城区"},
  {"id": "110102", "name": "西城区"},
  // 区县数据...
]

以上是一个简单的 jQuery 和 Ajax 实现省市县三级联动的示例代码，你可以根据自己的需求进行修改和扩展。