利用ajax和json实现省市区三级联动

实现省市区三级联动需要先准备好三个下拉框，分别用于显示省、市、区的选项。然后，通过 AJAX 和 JSON 技术，当用户选择省份时，向后台请求该省份下的所有城市信息，并将这些城市信息填充到“市”下拉框中。当用户选择市区时，再次向后台请求该城市下的所有区县信息，并将这些区县信息填充到“区”下拉框中。

以下是一种简单的实现方式：

HTML 代码：

<select id="province">
  <option value="">请选择省份</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

<select id="district">
  <option value="">请选择区县</option>
</select>

JavaScript 代码：

// 加载省份信息
function loadProvince() {
  $.getJSON('province.json', function(data) {
    var province = $('#province');
    province.empty().append('<option value="">请选择省份</option>');
    $.each(data, function(i, item) {
      province.append('<option value="' + item.code + '">' + item.name + '</option>');
    });
  });
}

// 加载城市信息
function loadCity(provinceCode) {
  $.getJSON('city.json', {provinceCode: provinceCode}, function(data) {
    var city = $('#city');
    city.empty().append('<option value="">请选择城市</option>');
    $.each(data, function(i, item) {
      city.append('<option value="' + item.code + '">' + item.name + '</option>');
    });
  });
}

// 加载区县信息
function loadDistrict(cityCode) {
  $.getJSON('district.json', {cityCode: cityCode}, function(data) {
    var district = $('#district');
    district.empty().append('<option value="">请选择区县</option>');
    $.each(data, function(i, item) {
      district.append('<option value="' + item.code + '">' + item.name + '</option>');
    });
  });
}

// 当省份选项改变时，加载该省份下的城市信息
$('#province').change(function() {
  var provinceCode = $(this).val();
  if (provinceCode) {
    loadCity(provinceCode);
  }
});

// 当城市选项改变时，加载该城市下的区县信息
$('#city').change(function() {
  var cityCode = $(this).val();
  if (cityCode) {
    loadDistrict(cityCode);
  }
});

// 页面加载时，加载省份信息
$(function() {
  loadProvince();
});

省份、城市、区县数据保存在三个 JSON 文件中，文件格式如下：

province.json：

[
  {"code": "110000", "name": "北京市"},
  {"code": "120000", "name": "天津市"},
  {"code": "130000", "name": "河北省"},
  {"code": "140000", "name": "山西省"},
  {"code": "150000", "name": "内蒙古自治区"},
  {"code": "210000", "name": "辽宁省"},
  {"code": "220000", "name": "吉林省"},
  {"code": "230000", "name": "黑龙江省"},
  {"code": "310000", "name": "上海市"},
  {"code": "320000", "name": "江苏省"},
  {"code": "330000", "name": "浙江省"},
  {"code": "340000", "name": "安徽省"},
  {"code": "350000", "name": "福建省"},
  {"code": "360000", "name": "江西省"},
  {"code": "370000", "name": "山东省"},
  {"code": "410000", "name": "河南省"},
  {"code": "420000", "name": "湖北省"},
  {"code": "430000", "name": "湖南省"},
  {"code": "440000", "name": "广东省"},
  {"code": "450000", "name": "广西壮族自治区"},
  {"code": "460000", "name": "海南省"},
  {"code": "500000", "name": "重庆市"},
  {"code": "510000", "name": "四川省"},
  {"code": "520000", "name": "贵州省"},
  {"code": "530000", "name": "云南省"},
  {"code": "540000", "name": "西藏自治区"},
  {"code": "610000", "name": "陕西省"},
  {"code": "620000", "name": "甘肃省"},
  {"code": "630000", "name": "青海省"},
  {"code": "640000", "name": "宁夏回族自治区"},
  {"code": "650000", "name": "新疆维吾尔自治区"}
]

city.json：

{
  "130000": [
    {"code": "130100", "name": "石家庄市"},
    {"code": "130200", "name": "唐山市"},
    {"code": "130300", "name": "秦皇岛市"},
    {"code": "130400", "name": "邯郸市"},
    {"code": "130500", "name": "邢台市"},
    {"code": "130600", "name": "保定市"},
    {"code": "130700", "name": "张家口市"},
    {"code": "130800", "name": "承德市"},
    {"code": "130900", "name": "沧州市"},
    {"code": "131000", "name": "廊坊市"},
    {"code": "131100", "name": "衡水市"}
  ],
  "320000": [
    {"code": "320100", "name": "南京市"},
    {"code": "320200", "name": "无锡市"},
    {"code": "320300", "name": "徐州市"},
    {"code": "320400", "name": "常州市"},
    {"code": "320500", "name": "苏州市"},
    {"code": "320600", "name": "南通市"},
    {"code": "320700", "name": "连云港市"},
    {"code": "320800", "name": "淮安市"},
    {"code": "320900", "name": "盐城市"},
    {"code": "321000", "name": "扬州市"},
    {"code": "321100", "name": "镇江市"},
    {"code": "321200", "name": "泰州市"},
    {"code": "321300", "name": "宿迁市"}
  ],
  ...
}

district.json：

{
  "130100": [
    {"code": "130102", "name": "长安区"},
    {"code": "130103", "name": "桥东区"},
    {"code": "130104", "name": "桥西区"},
    {"code": "130105", "name": "新华区"},
    {"code": "130107", "name": "井陉矿区"},
    {"code": "130108", "name": "裕华区"},
    {"code": "130121", "name": "井陉县"},
    {"code": "130123", "name": "正定县"},
    {"code": "130124", "name": "栾城县"},
    {"code": "130125", "name": "行唐县"},
    {"code": "130126", "name": "灵寿县"},
    {"code": "130127", "name": "高邑县"},
    {"code": "130128", "name": "深泽县"},
    {"code": "130129", "name": "赞皇县"},
    {"code": "130130", "name": "无极县"},
    {"code": "130131", "name": "平山县"},
    {"code": "130132", "name": "元氏县"},
    {"code": "130133", "name": "赵县"},
    {"code": "130181", "name": "辛集市"},
    {"code": "130182", "name": "藁城市"},
    {"code": "130183", "name": "晋州市"},
    {"code": "130184", "name": "新乐市"},
    {"code": "130185", "name": "鹿泉市"}
  ],
  "320100": [
    {"code": "320102", "name": "玄武区"},
    {"code": "320104", "name": "秦淮区"},
    {"code": "320105", "name": "建邺区"},
    {"code": "320106", "name": "鼓楼区"},
    {"code": "320111", "name": "浦口区"},
    {"code": "320113", "name": "栖霞区"},
    {"code": "320114", "name": "雨花台区"},
    {"code": "320115", "name": "江宁区"},
    {"code": "320116", "name": "六合区"},
    {"code": "320117", "name": "溧水区"},
    {"code": "320118", "name": "高淳区"}
  ],
  ...
}

其中，省份和城市数据的 JSON 文件中，每个省份和城市对应一个唯一的“code”，用于后续请求该省份或城市下的区县数据。而区县数据的 JSON 文件中，每个区县对应一个唯一的“code”，用于提交表单数据时使用。