????：<!DOCTYPE html><html><head><meta charset='UTF-8'><title>省縣市三級(jí)聯(lián)動(dòng)</title><style> select{margin-right:10px;}</style></head><body><la
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>省縣市三級(jí)聯(lián)動(dòng)</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="">請(qǐng)選擇省份</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ǐng)選擇市區(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ǐng)選擇縣區(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>
?? ???：查無(wú)此人?? ??：2019-05-20 09:22:47
???? ??：完成的不錯(cuò)。三級(jí)聯(lián)動(dòng)在頁(yè)面展示中，用到的比較頻繁，比如分類頁(yè)會(huì)有二級(jí)，加商品，就是三級(jí)。繼續(xù)加油。