html代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<style>
*{margin:0;padding: 0;}
.header{
width:400px;
height:300px;
margin:50px auto;
border:1px solid #ccc;
box-shadow:10px 10px 10px #000;
border-radius:8px;
padding:20px;
}
#info{
padding: 10px 20px;
color:limegreen;
font-size:16px;
margin-top:10px;
border-radius:10px;
}
</style>
</head>
<body>
<div class="header">
<leble for="province">省</leble>
<select name="province" id="province"></select>
<leble for="city">市</leble>
<select name="province" id="city"></select>
<leble for="area">区</leble>
<select name="province" id="area"></select>
<p id="info"></p>
</div>
<script src="../lib/jquery.js"></script>
<script>
$(function () {
let info = $('#info')[0];
// 获取省
$.getJSON('inc/province.json',function (data) {
let option = '<option value="">选择(省)</option>>';
$.each(data,function (i) {
option += '<option value="'+data[i].provinceId+'">'+data[i].provinceName+'</option>';
})
$('#province').html(option);
})
// 获取市
$('#province').change(function () {
console.log($(this).find(':selected').text());
info.innerHTML += ($(this).find(':selected').text())+ '省';
$('[value=""]').remove();
$.getJSON('inc/city.json',function (data) {
let option = '<option value="">选择(市)</option>>';
$.each(data,function (i) {
if(data[i].provinceId == $('#province').val())option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>>';
})
$('#city').html(option);
})
})
// 获取区
$('#city').change(function () {
info.innerHTML += ($(this).find(':selected').text())+'市';
$('[value=""]').remove();
$.getJSON('inc/area.json',function (data) {
let option = '<option value="">选择(区)</option>>';
$.each(data,function (i) {
if(data[i].cityId == $('#city').val())option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>>';
})
$('#area').html(option);
})
})
$('#area').change(function () {
$('[value=""]').remove();
info.innerHTML += ($(this).find(':selected').text())+'区';
info.style.backgroundColor = 'lightslategrey';
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
json文件：
省：
实例
[
{
"provinceId": 1,
"provinceName": "安徽"
},
{
"provinceId": 2,
"provinceName": "江苏"
}
]运行实例 »
点击 "运行实例" 按钮查看在线实例
市
实例
[
{
"cityId": 1,
"cityName": "合肥",
"provinceId":1
},
{
"cityId": 2,
"cityName": "芜湖",
"provinceId":1
},
{
"cityId": 3,
"cityName": "南京",
"provinceId":2
},
{
"cityId": 4,
"cityName": "苏州",
"provinceId":2
}
]运行实例 »
点击 "运行实例" 按钮查看在线实例
区：
实例
[
{
"areaId": 1,
"areaName": "包河",
"cityId": 1
},
{
"areaId": 2,
"areaName": "蜀山",
"cityId": 1
},
{
"areaId": 3,
"areaName": "镜湖",
"cityId": 2
},
{
"areaId": 4,
"areaName": "弋江",
"cityId": 2
},
{
"areaId": 5,
"areaName": "玄武",
"cityId": 3
},
{
"areaId": 6,
"areaName": "六合",
"cityId": 3
},
{
"areaId": 7,
"areaName": "吴江",
"cityId": 4
},
{
"areaId": 8,
"areaName": "昆山",
"cityId": 4
}
]运行实例 »
点击 "运行实例" 按钮查看在线实例
