abstract：总结：写代码，是需要细心和努力的。加油，代码：html：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三级联动菜单</title></head><body>省 <selec
总结：
写代码，是需要细心和努力的。加油，
代码：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动菜单</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select> <br>
<span id="proaddr"></span>
<span id="cityaddr"></span>
<span id="areaaddr"></span>
<script src="jq.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);
}
);
let addr = "";
$('#pro').change(function(){
//查看当前选中的元素内容
console.log($(this).find(':selected').text());
addr = $(this).find(':selected').text();
$('#proaddr').html(addr);
$.getJSON('inc/2.json', function(data){
let option = '<option>选择(市)</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(){
addr = $(this).find(':selected').text();
$('#cityaddr').html(addr);
$.getJSON('inc/3.json', function(data){
let option = '<option>选择(区/县)</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(){
addr = $(this).find(':selected').text();
$('#areaaddr').html(addr);
})
})
</script>
</body>
</html>
json:
1
[
{
"proId": 1,
"proName": "河南"
},
{
"proId": 2,
"proName": "四川"
}
]
2
[
{
"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
}
]
Correcting teacher：查无此人Correction time：2019-04-16 09:38:25
Teacher's summary：说的不错，作业完成的很好。就是代码有点乱，养成好习惯，整理下代码。继续加油。