abstract：<!DOCTYPE html><html><head><meta charset='UTF-8'><title>省县市三级联动</title><style> select{margin-right:10px;}</style></head><body><la
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>省县市三级联动</title>
<style>
select{margin-right:10px;}
</style>
</head>
<body>
<label for='province'>省</label><select id='province'></select>
<label for='city'>市</label><select id='city'></select>
<label for='town'>县</label><select id='town'></select>
<script src='jquery-3.3.1.min.js'></script>
<script>
$.getJSON('province.json',function(data){
var opt = '<option value="">请选择省份</option>';
for(var i in data){
var proObj = data[i];
opt += '<option value="'+proObj['proId']+'">'+proObj['proName']+'</option>';
}
$('#province').html(opt)
});
$('#province').change(function(){
$(this).find('[value=""]').remove();
$("#town").html('');
var proNum = $(this).val();
getCity(proNum);
});
function getCity(proArg){
$.getJSON('city.json',function(data){
var opt = '<option value="">请选择市区</option>';
for(var j in data){
var cityObj = data[j];
if(cityObj['proId'] == proArg){
opt += '<option value="'+cityObj['cityId']+'">'+cityObj['cityName']+'</option>';
}
}
$('#city').html(opt)
});
}
$('#city').change(function(){
$(this).find('[value=""]').remove();
var cityNum = $(this).val();
getTown(cityNum);
});
function getTown(cityArg){
$.getJSON('town.json',function(data){
var opt = '<option value="">请选择县区</option>';
for(var k in data){
var townObj = data[k];
if(townObj['cityId'] == cityArg){
opt += '<option value="'+townObj['areaId']+'">'+townObj['areaName']+'</option>';
}
}
$('#town').html(opt)
});
}
$('#town').change(function(){
$(this).find('[value=""]').remove();
});
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-20 09:22:47
Teacher's summary：完成的不错。三级联动在页面展示中，用到的比较频繁，比如分类页会有二级，加商品，就是三级。继续加油。