Ajax select三级联动实例

abstract：HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax三级联动操作</title> <script src="http://code.jquery.com/jquery-3.

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" : "三江县"}
]

Correcting teacher：查无此人Correction time：2019-03-18 09:04:09
Teacher's summary：完成的不错。三级联动现在很常用，比如二级分类，加产品。在一起是三级联动。继续加油

Ajax select三级联动实例

Popular Entries