摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
省：<select name=''id="pro"></select>
市：<select name="" id="city"></select>
区：<select name="" id="area"></select>
<p></p>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function () {
$.getJSON('省.json',function (data) {
// console.log(data);
var option = '<option>选择(省)</option>';
$.each(data,function (i) {
// console.log(data[i]);
option = option+'<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
})
// console.log(option);
$(option).appendTo("#pro");
})
$('#pro').change(function () {
var s = $(this).find(':selected').text();
$('p').html(s);
$.getJSON('市.json',function (data) {
// console.log(data)
var option = '<option>选择（市）</option>';
$.each(data,function (i) {
// console.log(data[i]);
if (data[i].proId == $('#pro').val()){
option = option+'<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
})
$('#city').html(option);
})
})
$('#city').change(function () {
var s = $(this).find(':selected').text();
var p = $('p').text();
$('p').html(p+s);
$.getJSON('区.json',function (data) {
// console.log(data)
var option = '<option>选择（区）</option>';
$.each(data,function (i) {
// console.log(data[i]);
if (data[i].cityId == $('#city').val()){
option = option+'<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
})
$('#area').html(option);
})
})
$('#area').change(function () {
var s = $(this).find(':selected').text();
var p = $('p').text();
$('p').html(p+s);
})
})
</script>
</html>
[
{
"proId":1,
"proName":"安徽"
},
{
"proId":2,
"proName":"江苏"
}
]
[
{
"cityId":1,
"cityName":"合肥",
"proId":1
},
{
"cityId":2,
"cityName":"芜湖",
"proId":1
},
{
"cityId":1,
"cityName":"南京",
"proId":2
},
{
"cityId":2,
"cityName":"苏州",
"proId":2
}
]
[
{
"areaId":1,
"areaName":"包河区",
"cityId":1
},
{
"areaId":2,
"areaName":"蜀山区",
"cityId":1
},
{
"areaId":1,
"areaName":"玄武区",
"cityId":2
},
{
"areaId":2,
"areaName":"昆山区",
"cityId":2
}
]
第一先获取json文件的数据，并添加到选择框中
1.通过$.getjson()方法获取到json文件里的数据，$.each()方法遍历获取到的对象
2.可以使用对象的属性方法data[i].proId获取到对象的值和名称
3.创建一个变量option存储值和名称，拼接成选择框的格式<option></option>
4.将option添加到select框中
第二步选择框的change事件，通过获取选择框选中的值和第二级获取数据的proId比较
1.如果选择框选中的值和遍历获取到的对象的proId一致，变量option存储拼接值
2.将option添加到select框中
第三步 数据双向绑定
1.$(this).find(':selected').text() 获取当前选中的文本内容
2.将它添加到p标签中
3.获取到p标签的内容
3.将p标签的内容和当前选中的文本内容进行拼接 添加到p标签中
批改老师：韦小宝批改时间：2019-01-22 13:12:29
老师总结：掌握了三级联动的原理，以后写四级城市联动也是轻而易举的事情 继续加油吧
