摘要：<!DOCTYPE html> <html> <head> <title>三級(jí)聯(lián)動(dòng)</title> <meta charset="utf-8"> </head> <body> 省:<select id="pro">&l
<!DOCTYPE html>
<html>
<head>
<title>三級(jí)聯(lián)動(dòng)</title>
<meta charset="utf-8">
</head>
<body>
省:<select id="pro"></select>
市:<select id="city"></select>
縣:<select id="area"></select>
<p id="addr"></p>
<script type="text/javascript" src="../../jquery-3.3.1.min.js"></script>
<script>
// 首先讀取在頁(yè)面需要顯示的內(nèi)容;
$(document).ready(function(){
$.getJSON('pro.json',function(data){
var option = '<option>請(qǐng)選擇省</option>';
//遍歷返回來(lái)的對(duì)象;
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
$('#pro').html(option);
});
})
//點(diǎn)擊省...
$('#pro').change(function(){
$('#addr').html($(this).find(':selected').text());
$.getJSON('city.json',function(data){
var option = '<option>請(qǐng)選擇省</option>';
$.each(data,function(i){
if(data[i].toId == $('#pro').val()){
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
});
$('#city').html(option);
})
});
//點(diǎn)擊市...
$('#city').change(function(){
$('#addr').append(' '+$(this).find(':selected').text());
$.getJSON('area.json',function(data){
var option = '<option>請(qǐng)選擇省</option>';
$.each(data,function(i){
if(data[i].toid == $('#city').val()){
option += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
})
$('#area').html(option);
});
});
$('#area').change(function(){
//直接在元素后面用append做添加,
$('#addr').append(' '+$(this).find(':selected').text());
});
</script>
</body>
</html>總結(jié):用append做的添加,暫時(shí)想不到用其他簡(jiǎn)單的方法;
批改老師：查無(wú)此人批改時(shí)間：2019-04-24 15:42:56
老師總結(jié)：完成的不錯(cuò)，還可以用.html，全部替換。繼續(xù)加油。