用ajax中getjson做三级联动
<!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做的添加,暂时想不到用其他简单的方法;