【前端笔记】省市区级联联动列表

最新推荐文章于 2024-08-31 09:19:47 发布

QiBarbara

最新推荐文章于 2024-08-31 09:19:47 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： js html 前端省市区级联列表

本文链接：https://blog.csdn.net/weixin_41606276/article/details/81432543

版权

前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>省市区县级联菜单</title>
	<style type="text/css">
		
	</style>
</head>
<body>
 	省：<select id="sheng">
 		<option value="">--请选择--</option>
 	</select>
 	市：<select id="shi">
 		<option value="">--请选择--</option>
 	</select>
 	区/县：<select id="xian">
 		<option value="">--请选择--</option>
 	</select>
 	<script type="text/javascript">
		var sheng=document.getElementById('sheng');
		var shi=document.getElementById('shi');
		var xian=document.getElementById('xian');

		var arr_sheng=["黑龙江省","河北省","河南省","湖南省"];
		var arr_shi=[
						["哈尔滨市","齐齐哈尔市","鹤岗市","双鸭山市"],
						["石家庄市","保定市","廊坊市","秦皇岛市"],
						["郑州市","开封市","洛阳市","安阳市"],
						["浏阳市","湘乡市","常宁市","武冈市"]
		             ];
		var arr_xian=[
						[
							["松北区","道里区"],
							["龙沙区","建华区"],
							["兴山区","向阳区"],
							["尖山区","岭东区"]
						],
						[	
							["石家庄1","石家庄2"],
							["保定1","保定2"],
							["广阳区","安次区"],
							["海港区","北戴河区"]
						],
						[	
							["郑州1","郑州2"],
							["开封1","开封2"],
							["洛阳1","洛阳2"],
							["安阳1","安阳2"]
						],
						[
							["浏阳1","浏阳2"],
							["湘乡1","湘乡2"],
							["常宁1","常宁2"],
							["武冈1","武冈2"]
						]
					];

		var quanjv_arr;

		function input_arr(arr,event) {
			for (var i = 0; i <arr.length; i++) {
				var option=new Option(arr[i],i);
				event.appendChild(option);
			}
		}
		 input_arr(arr_sheng,sheng);


		 sheng.onchange=function(){
		 	shi.options.length=1;
		 	xian.options.length=1;
		 	var index=this.value;
		 	var arr_shi_next=arr_shi[index];
		 	quanjv_arr=arr_xian[index];
		 	input_arr(arr_shi_next,shi);
		 }
		 shi.onchange=function(){
		 	xian.options.length=1;
		 	var index=this.value;
		 	var arr_xian_next=quanjv_arr[index];
			input_arr(arr_xian_next,xian);
		 }

 	</script>
</body>
</html>