摘要：<!DOCTYPE html> <html> <head> <title>三级联动</title> <meta charset="utf-8"> </head> <body> 省:<select id="pro">&l
<!DOCTYPE html>
<html>
<head>
<title>三级联动</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>
// 首先读取在页面需要显示的内容;
$(document).ready(function(){
$.getJSON('pro.json',function(data){
var option = '<option>请选择省</option>';
//遍历返回来的对象;
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
$('#pro').html(option);
});
})
//点击省...
$('#pro').change(function(){
$('#addr').html($(this).find(':selected').text());
$.getJSON('city.json',function(data){
var option = '<option>请选择省</option>';
$.each(data,function(i){
if(data[i].toId == $('#pro').val()){
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
});
$('#city').html(option);
})
});
//点击市...
$('#city').change(function(){
$('#addr').append(' '+$(this).find(':selected').text());
$.getJSON('area.json',function(data){
var option = '<option>请选择省</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>总结:用append做的添加,暂时想不到用其他简单的方法;
批改老师：查无此人批改时间：2019-04-24 15:42:56
老师总结：完成的不错，还可以用.html，全部替换。继续加油。
