摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現(xiàn)三級聯(lián)動城市</title> <script type="text/javascript" src="
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實現(xiàn)三級聯(lián)動城市</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
省: <select id="pro"></select>
市: <select id="city"></select>
區(qū)/縣: <select id="area"></select>
<script type="text/javascript">
$(function(){
$.getJSON('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() {
$('[value=""]').remove();
let option = '<option value="">請選擇(市)</option>';
let proVal = parseInt($(this).val());
$.getJSON('2.json',function(data) {
$.each(data,function(i){
if(data[i].proId == proVal) {
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
})
$('#city').html(option);
})
})
// 城市改變事件
$('#city').change(function(){
$('[value=""]').remove();
let option = '<option value="">請選擇(區(qū)/縣)</option>';
let cityVal = parseInt($(this).val());
console.log(cityVal)
$.getJSON('3.json',function(data) {
$.each(data,function(i){
if(data[i].cityId == cityVal) {
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
})
$('#area').html(option);
})
})
})
</script>
</body>
</html>
批改老師：西門大官人批改時間：2019-04-01 09:36:05
老師總結(jié)：作業(yè)寫的不錯，代碼結(jié)構(gòu)比較規(guī)范。變量命名基本做到見名知意