摘要：<!DOCTYPE html><html><head> <title>三級聯(lián)動</title></head><body>?。?lt;select name="" id="pro"></select>市：<select name=""
<!DOCTYPE html>
<html>
<head>
<title>三級聯(lián)動</title>
</head>
<body>
省：<select name="" id="pro"></select>
市：<select name="" id="city"></select>
區(qū)：<select name="" id="area"></select>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
<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);
});
$('#pro').change(function(){
//查看當(dāng)前選擇中元素內(nèi)容
console.log($(this).find(':selected').text());
$.getJSON('inc/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[i].cityName+'</option>';
}
});
$('#city').html(option);
});
});
$('#city').change(function(){
//查看當(dāng)前選擇中元素內(nèi)容
console.log($(this).find(':selected').text());
$.getJSON('inc/3.json',function(data){
let option = '<option value="">選擇(縣區(qū))</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(){
//查看當(dāng)前選擇中元素內(nèi)容
console.log($(this).find(':selected').text());
});
})
</script>
</body>
</html>
批改老師：天蓬老師批改時間：2018-12-12 08:54:51
老師總結(jié)：這個作業(yè)重點是考察通過Ajax方式異步的獲取數(shù)據(jù)并渲染到頁面上