摘要：<!DOCTYPE html><html><head><meta charset='UTF-8'><title>省縣市三級聯(lián)動</title><style> select{margin-right:10px;}</style></head><body><la
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>省縣市三級聯(lián)動</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="">請選擇市區(qū)</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="">請選擇縣區(qū)</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>
批改老師：查無此人批改時間：2019-05-20 09:22:47
老師總結(jié)：完成的不錯。三級聯(lián)動在頁面展示中，用到的比較頻繁，比如分類頁會有二級，加商品，就是三級。繼續(xù)加油。