摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>08省市区三级联动</title> <script src="jquery-3.3.1.min.js" ty
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08省市区三级联动</title>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
省: <select id="paro">
<option value="">请选择</option>
</select>
市 : <select id="city">
<option value="">请选择</option>
</select>
区 : <select id="area">
<option value="">请选择</option>
</select>
<div id="text">
</div>
<script type="text/javascript">
$.getJSON('1.json',function(data){
var str = "<option value=''>请选择</option>"
//遍历
$.each(data,function(index,value){
str += "<option value='"+data[index].paroid+"'>"+data[index].name+"</option>";
})
$('#paro').html(str);
})
$('#paro').change(function(event){
//市
$.getJSON('2.json',function(data){
var str = "<option value=''>请选择</option>"
//遍历
$.each(data,function(index,value){
//省相等
if($(event.target).val() == data[index].paroid){
str += "<option value='"+data[index].cityid+"'>"+data[index].cityname+"</option>";
}
});
$('#city').html(str);
})
$('#paro').find('[value=""]').remove();
});
$('#city').change(function(event){
//区
$.getJSON('3.json',function(data){
var str = "<option value=''>请选择</option>"
//遍历
$.each(data,function(index,value){
//省相等
if($(event.target).val() == data[index].cityId){
str += "<option value='"+data[index].areaId+"'>"+data[index].areaName+"</option>";
}
});
$('#area').html(str);
});
$('#area').find('[value=""]').remove();
})
$('#area').change(function(){
$('#text').text(getUser())
})
/**
* 返回用户选择的信息
*/
function getUser(){
return '你当前选择的地址是: '+$('#paro').find(':selected').text()+"省"+$('#city').find(':selected').text()+$('#area').find(':selected').text();
}
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-01 16:41:58
老师总结：写的很不错 ajax完成三级联动在很多的网站中都是很常见的，这个一定要好好掌握了！继续加油吧！！
