Day01__案例: 省市区三级联动

最新推荐文章于 2022-07-27 01:00:00 发布

@Ti...

最新推荐文章于 2022-07-27 01:00:00 发布

阅读量1k

点赞数

分类专栏： html js 文章标签： javascript jquery js

本文链接：https://blog.csdn.net/FrankieIT/article/details/113970019

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/cityjson.js"></script>
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	</head>
	<body>
		省:
		<select id="province">
			<option>请选择</option>
		</select>
		市:
		<select id="city">
			<option>请选择</option>
		</select>
		区:
		<select id="zone">
			<option>请选择</option>
		</select>
	</body>
	<script>
		//1.提取数据文件中的省和直辖市,渲染到省的option中
		//console.log(data);
		//foreach循环data.每次循环变量index和item
		var i;
		$.each(data,function(index,item){
			//console.log(index);
			//console.log(item);
			$("#province").append("<option value="+index+">"+item.name+"</option>")
		})
		//事件  点击某个省,就渲染该省对应的市区
		//一....就...
		$("#province").bind("change",function(){
			$("#city").empty();
			$("#city").append("<option>请选择</option>")
			var proIndex=$(this).val();
			var cities=data[proIndex];
			i=proIndex;
			$.each(cities.child,function(index,item) {
				$("#city").append("<option value="+index+">"+item.name+"</option>")
			})
		})
		$("#city").bind("change",function(){
			$("#zone").empty();
			$("#zone").append("<option>请选择</option>");
			var zoneIndex=$(this).val();
			//console.log(zoneIndex);
			//var zones=data[proIndex].;  报错,未定义proIndex. data无法到市ID
			var zones=data[i].child[zoneIndex];
//			console.log(zones.child);
			$.each(zones.child,function(index,item) {
				$("#zone").append("<option value="+index+">"+item+"</option>")
			});
		})
	</script>
</html>