三级联动是指一级选择后，二级会根据一级的选择发生变化，三级会根据二级的选择发生变化。下面我们来利用ajax和json实现省市区三级联动。
1. 创建HTML页面
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="area">
<option value="">请选择区县</option>
</select>
<script>
$(function () {
// 加载省份数据
$.getJSON("province.json", function (data) {
var options = "<option value=''>请选择省份</option>";
$.each(data, function (index, item) {
options += "<option value='" + item.code + "'>" + item.name + "</option>";
});
$("#province").html(options);
});
// 省份选择发生变化时加载城市数据
$("#province").change(function () {
var provinceCode = $(this).val();
if (provinceCode) {
$.getJSON("city.json", {provinceCode: provinceCode}, function (data) {
var options = "<option value=''>请选择城市</option>";
$.each(data, function (index, item) {
options += "<option value='" + item.code + "'>" + item.name + "</option>";
});
$("#city").html(options);
});
} else {
$("#city").html("<option value=''>请选择城市</option>");
$("#area").html("<option value=''>请选择区县</option>");
}
});
// 城市选择发生变化时加载区县数据
$("#city").change(function () {
var cityCode = $(this).val();
if (cityCode) {
$.getJSON("area.json", {cityCode: cityCode}, function (data) {
var options = "<option value=''>请选择区县</option>";
$.each(data, function (index, item) {
options += "<option value='" + item.code + "'>" + item.name + "</option>";
});
$("#area").html(options);
});
} else {
$("#area").html("<option value=''>请选择区县</option>");
}
});
});
</script>
</body>
</html>
```
2. 创建province.json文件
```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": "新疆维吾尔自治区"}
]
```
3. 创建city.json文件
```json
{
"110000": [
{"code": "110100", "name": "市辖区"},
{"code": "110200", "name": "县"}
],
"120000": [
{"code": "120100", "name": "市辖区"},
{"code": "120200", "name": "县"}
],
"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": "衡水市"}
],
"140000": [
{"code": "140100", "name": "太原市"},
{"code": "140200", "name": "大同市"},
{"code": "140300", "name": "阳泉市"},
{"code": "140400", "name": "长治市"},
{"code": "140500", "name": "晋城市"},
{"code": "140600", "name": "朔州市"},
{"code": "140700", "name": "晋中市"},
{"code": "140800", "name": "运城市"},
{"code": "140900", "name": "忻州市"},
{"code": "141000", "name": "临汾市"},
{"code": "141100", "name": "吕梁市"}
],
// 省略其他省份的城市数据
}
```
4. 创建area.json文件
```json
{
"110100": [
{"code": "110101", "name": "东城区"},
{"code": "110102", "name": "西城区"},
{"code": "110105", "name": "朝阳区"},
{"code": "110106", "name": "丰台区"},
{"code": "110107", "name": "石景山区"},
{"code": "110108", "name": "海淀区"},
{"code": "110109", "name": "门头沟区"},
{"code": "110111", "name": "房山区"},
{"code": "110112", "name": "通州区"},
{"code": "110113", "name": "顺义区"},
{"code": "110114", "name": "昌平区"},
{"code": "110115", "name": "大兴区"},
{"code": "110116", "name": "怀柔区"},
{"code": "110117", "name": "平谷区"}
],
"110200": [
{"code": "110228", "name": "密云县"},
{"code": "110229", "name": "延庆县"}
],
"120100": [
{"code": "120101", "name": "和平区"},
{"code": "120102", "name": "河东区"},
{"code": "120103", "name": "河西区"},
{"code": "120104", "name": "南开区"},
{"code": "120105", "name": "河北区"},
{"code": "120106", "name": "红桥区"},
{"code": "120110", "name": "东丽区"},
{"code": "120111", "name": "西青区"},
{"code": "120112", "name": "津南区"},
{"code": "120113", "name": "北辰区"},
{"code": "120114", "name": "武清区"},
{"code": "120115", "name": "宝坻区"},
{"code": "120116", "name": "滨海新区"},
{"code": "120117", "name": "宁河区"},
{"code": "120118", "name": "静海区"}
],
"120200": [
{"code": "120225", "name": "蓟县"}
],
"130100": [
{"code": "130102", "name": "长安区"},
{"code": "130104", "name": "桥西区"},
{"code": "130105", "name": "新华区"},
{"code": "130107", "name": "井陉矿区"},
{"code": "130108", "name": "裕华区"},
{"code": "130109", "name": "藁城区"},
{"code": "130110", "name": "鹿泉区"},
{"code": "130111", "name": "栾城区"},
{"code": "130121", "name": "井陉县"},
{"code": "130123", "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": "130183", "name": "晋州市"},
{"code": "130184", "name": "新乐市"}
],
// 省略其他城市的区县数据
}
```
以上就是利用ajax和json实现省市区三级联动的全部代码。在实际开发中，可以根据自己的需求进行修改。
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1580
