摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax省市區(qū)三級聯(lián)動</title></head><body>省: <select name="" id="pro">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax省市區(qū)三級聯(lián)動</title>
</head>
<body>
省: <select name="" id="pro"></select>
市: <select name="" id="city"></select>
區(qū): <select name="" id="area"></select>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function(){
$.getJSON('./1.json',function(data){
let option = '<option value="">選擇</option>';
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[0].proName+'</option>';
})
$('#pro').html(option);
})
});
$('#pro').change(function(){
$.getJSON('./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[0].cityName+'</option>';
}
})
$('#city').html(option);
});
}) $('#city').change(function(){
$.getJSON('./3.json',function(data){
let option = '<option value="">選擇</option>';
$.each(data,function(i){
if(data[i].cityId==$('#pro').val()){
option += '<option value="'+data[i].areaId+'">'+data[0].areaName+'</option>';
}
})
$('#area').html(option);
})
});
</script>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2019-02-13 09:10:40
老師總結(jié)：寫的很不錯(cuò) 城市的三級聯(lián)動很重要的 在以后的開發(fā)中經(jīng)常會遇到需要使用城市三級聯(lián)動的地方！