js的三级联动

最新推荐文章于 2024-04-26 20:21:12 发布

尘辰晨

最新推荐文章于 2024-04-26 20:21:12 发布

阅读量6.6k

点赞数 1

本文链接：https://blog.csdn.net/Phosphenes/article/details/90047472

版权

在这里插入图片描述
如上图所示，我们平时在填写相关信息时，经常会碰到这样的下拉选项栏，这里我写了一个这样的填写地址信息的三级联动下拉选项栏。

<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	省份<select id="pro" onchange="getcity()">  <!--创造三个下拉选项栏-->
	     <option>选择省份</option>
	</select>
	城市<select id="city" onchange="getarea()">
		<option>选择城市</option>
	</select>
	区<select id="area">
		<option>选择区</option>
	</select>
</body>
<script type="text/javascript">
	var sheng=["湖北省","湖南省","广东省"];
	var city=[["武汉市","宜昌市","咸宁市"],["长沙市","常德市","邵阳市"],["广州市","深圳市","惠州市"]]
	var ar=[[["武昌区","洪山区"],["夷陵区"],["咸安区"]],[["芙蓉区"],["鼎城区"],["双清区"]],[["荔湾区"],["福田区"],["惠阳区"]]]
	window.onload=start;
	var s=document.getElementById("pro");  //设置初始的省份选项
	function start(){
		
		for(var i=0;i<sheng.length;i++){
			var op=document.createElement("option");
			op.innerHTML=sheng[i];
			s.appendChild(op);      //添加几个可选择的省份到第一个选项下拉栏
		}
	}
	var c=document.getElementById("city")
	function getcity(){
		c.length=1;
		var sw=s.selectedIndex;//找到省份位置，从而好使后面的城市与省份对应
		var citys=city[sw-1];
		for(var j=0;j<citys.length;j++){
			var op1= document.createElement("option");
			op1.innerHTML=citys[j];
			c.appendChild(op1);
		}
	}
	var a=document.getElementById("area")
	function getarea(){
		a.length=1;
		var sw=s.selectedIndex;//省份位置，与上一步中的sw一样
		var cw=c.selectedIndex;//城市位置
		var citys=ar[sw-1];//先把三维数组中的区域找出来，确定是哪个省里的几个区
		var ars=citys[cw-1];//再通过之前定位的城市位置，把对应的区对应给相应的城市
		for(var k=0;k<ars.length;k++){
			var op2=document.createElement("option");
			op2.innerHTML=ars[k];
			a.appendChild(op2);
		}
	}
</script>

尘辰晨

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js的三级联动

如上图所示，我们平时在填写相关信息时，经常会碰到这样的下拉选项栏，这里我写了一个这样的填写地址信息的三级联动下拉选项栏。<head> <meta charset="UTF-8"> <title></title></head><body> 省份<select id="pro" onchange="getcit...
复制链接

扫一扫