abstract：AJAX是現(xiàn)在數(shù)據(jù)提交和讀取的重要手段,感覺這是一個關(guān)鍵重點 ,反復(fù)看了兩遍,感覺還是有所提升.<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax實現(xiàn)省市
AJAX是現(xiàn)在數(shù)據(jù)提交和讀取的重要手段,感覺這是一個關(guān)鍵重點 ,反復(fù)看了兩遍,感覺還是有所提升.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax實現(xiàn)省市區(qū)三級聯(lián)動</title>
<script src="../static/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
省: <select name="" id="pro"></select>
市: <select name="" id="city"></select>
區(qū)縣: <select name="" id="area"></select>
<script>
$(function(){
//選擇省
$.getJSON('inc/1.json',function(data){
// console.log(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 () {
$.getJSON('inc/2.json',function(data){
// console.log(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);
})
})
//選擇區(qū)縣
$('#city').change(function () {
$.getJSON('inc/3.json',function(data){
// console.log(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);
})
})
})
</script>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-05-13 09:27:46
Teacher's summary：完成的不錯。三級聯(lián)動非常實用。繼續(xù)加油。