Ajax select三级联动实例
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax三级联动操作</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
省:<select id="pro"></select> 市:<select id="city"></select> 区\县:<select id="area"></select>
<hr>
<span id="one"></span> <span id="two"></span> <span id="three"></span>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
// 加载pro.json的数据, 并使用$.each('遍历的数据','遍历的键或者值function(k,v)')遍历拼装option加入select元素内
$.getJSON('pro.json', function(pro){
// console.log(pro)
let option = '<option value="">请选择</option>';
$.each(pro, function(k){
option += '<option value="'+pro[k].proId+'">'+pro[k].proName+'</option>';
});
$('#pro').html(option);
});
/* 当id为pro改变是触发
循环判断city.proId的值是否等于上一级的proId的值
*/
$('#pro').change(function(){
$.getJSON('city.json', function(city){
let option = '<option value="">请选择</option>';
$.each(city, function(k){
if(city[k].proId == $('#pro').val()){
option += '<option value="'+city[k].cityId+'">'+city[k].city+'</option>';
}
});
$('#city').html(option);
});
let name1 = $(this).find(':selected').text();
$('#one').text(name1);
});
$('#city').change(function(){
$.getJSON('area.json', function(area){
let option = '<option value="">请选择</option>';
$.each(area, function(k){
if(area[k].cityId == $('#city').val()){
option += '<option value="'+area[k].areaId+'">'+area[k].area+'</option>';
}
});
$('#area').html(option);
});
let name2 = $(this).find(':selected').text();
$('#two').html(name2);
});
$('#area').change(function(){
let name3 = $(this).find(':selected').text();
$('#three').html(name3);
});
});
</script>pro.json
[
{"proId" : 1, "proName" : "广东"},
{"proId" : 2, "proName" : "广西"}
]city.json
[
{"proId" : 1, "cityId" : 1, "city" : "深圳市"},
{"proId" : 1, "cityId" : 2, "city" : "广州市"},
{"proId" : 2, "cityId" : 3, "city" : "南宁市"},
{"proId" : 2, "cityId" : 4, "city" : "柳州市"}
]area.json
[
{"cityId" : 1, "areaId" : 1, "area" : "罗湖区"},
{"cityId" : 1, "areaId" : 2, "area" : "福田区"},
{"cityId" : 1, "areaId" : 3, "area" : "南山区"},
{"cityId" : 2, "areaId" : 4, "area" : "天河区"},
{"cityId" : 2, "areaId" : 5, "area" : "荔湾区"},
{"cityId" : 2, "areaId" : 6, "area" : "越秀区"},
{"cityId" : 3, "areaId" : 7, "area" : "良庆区"},
{"cityId" : 3, "areaId" : 8, "area" : "江南区"},
{"cityId" : 4, "areaId" : 9, "area" : "融安县"},
{"cityId" : 4, "areaId" : 10, "area" : "三江县"}
]