摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作业提示: 三级联动菜单</title> <
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业提示: 三级联动菜单</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select>
<p id="addr"></p>
<script src="inc/jquery-3.3.1.js"></script>
<script>
$(function(){
$.getJSON('inc/1.json',function(data){
let option = '<option value="">选择(省)</option>';
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
$('#pro').html(option);
//$(option).appendTo('#pro');
});
$('#pro').change(function(){
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
$.getJSON('inc/2.json',function(data){
let option = '<option value="">选择(市)</option>';
$.each(data,function(i){
if (data[i].proId == $('#pro').val()) {
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
});
$('#city').html(option);
});
});
$('#city').change(function(){
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
$.getJSON('inc/3.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(){
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
});
})
</script>
</body>
</html>[{
"proId": 1,
"proName": "安徽"
},
{
"proId": 2,
"proName": "江苏"
}
][
{
"cityId": 1,
"cityName": "合肥",
"proId":1
},
{
"cityId": 2,
"cityName": "芜湖",
"proId":1
},
{
"cityId": 3,
"cityName": "南京",
"proId":2
},
{
"cityId": 4,
"cityName": "苏州",
"proId":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
}
]联动关键
data[i].proId == $('#pro').val()
data[i].cityId == $('#city').val()
批改老师：韦小宝批改时间：2018-11-24 15:16:05
老师总结：嗯！写的很不错哦！下次记得给代码做个总结！课后还要记得多多练习！
