用JavaScript实现三级联动

最新推荐文章于 2023-11-25 20:58:06 发布

奔跑的james

最新推荐文章于 2023-11-25 20:58:06 发布

阅读量964

点赞数

分类专栏： web JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44960513/article/details/90046533

版权

web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

代码如下:

<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<select id="pro" onchange="citys()">
		<option >请选择你的省份</option>
	</select>
	<select id="city" onchange="towns()">
		<option>请选择你的城市</option>
	</select>
	<select id="town">
		<option>请选择你的具体地址</option>
	</select>
</body>
 <script type="text/javascript">
 	var pro=["湖北省","湖南省","北京市","广东省"];
 	var city=[["武汉市","黄石市","襄阳市"],["长沙市","湘潭市","衡阳市"],["朝阳区","海淀区","昌平区"],["广州市","佛山市","东莞市"]];
 	var town=[[["武昌区"],["大冶市"],["枣阳市"]],[["橘子洲"],["湘潭"],["永州"]],[["朝阳公园"],["颐和园"],["永安公园"]],[["白云区"],["顺德区"],["香市公园"]]]
 	var pro1=document.getElementById("pro");
 	var city1=document.getElementById("city");	 
 	var town1=document.getElementById("town");
 	window.onload=province();
 	function province(){
 		var num=pro.length;
 		for(var a=0;a<num;a++){
 			var p=document.createElement("option")
 			p.innerHTML=pro[a];
 			pro1.appendChild(p);
 		}	 			 			 		
 	}
 	function citys(){
 		city1.length=1;
 		var weizhi=pro1.selectedIndex//获取当前点击省份的位置
 		var cityweizhi=city[weizhi-1];//获取省份位置对应的数据
 		for(var b=0;b<cityweizhi.length;b++){
 			var c=document.createElement("option");     
 			c.innerHTML=cityweizhi[b];
 			city1.appendChild(c);
 		}	 		
 	}
 	function towns(){
 		town1.length=1;
 		var weizhi3=pro1.selectedIndex//获取省份位置
 		var weizhi2=city1.selectedIndex;//获取选择的城市的位置
 		var townweizhi=town[weizhi3-1]
 		 var townweizhi1=townweizhi[weizhi2-1];//获取对应的位置
 		for(var i=0;i<townweizhi1.length;i++){
 		var t=document.createElement("option");
 		t.innerHTML=townweizhi1[i];
 		town1.appendChild(t);	 			 			 		
 		}	 			 			 			 			 		
 	}
 	
 </script>

运行效果:
在这里插入图片描述