三级联动

最新推荐文章于 2024-05-20 18:02:16 发布

୧⍤⃝潮张超落

最新推荐文章于 2024-05-20 18:02:16 发布

阅读量116

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/qq_44035889/article/details/98045470

版权

js基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="prove">
			<option>--请选择省份--</option>
		</select >
		<select id="city">
			<option>--请选择城市--</option>
		</select>
		<select id="county">
			<option>--请选择区县--</option>
		</select>
		<script type="text/javascript">
			var arr=[
			[1,'陕西省',0],
			[2,'四川省',0],
			[3,'山西省',0],
			
			[4,'西安市',1],
			[5,'渭南市',1],
			[6,'咸阳市',1],
			[7,'成都市',2],
			[8,'锦阳市',2],
			[9,'德州市',2],
			[10,'太原市',3],
			[11,'运城市',3],
			[12,'大同市',3],
			
			[13,'高新区',4],
			[14,'雁塔区',4],
			[15,'长安区',4],
			[16,'富平县',5],
			[17,'蒲城县',5],
			[18,'韩城县',5],
			[19,'咸阳1',6],
			[20,'咸阳2',6],
			[21,'咸阳3',6],
			[22,'成都1',7],
			[23,'成都2',7],
			[24,'成都3',7],
			[25,'锦阳1',8],
			[26,'锦阳2',8],
			[27,'锦阳3',8],
			[28,'德州1',9],
			[29,'德州2',9],
			[30,'德州3',9],
			[31,'太原1',10],
			[32,'太原2',10],
			[33,'太原3',10],
			[34,'运城1',11],
			[35,'运城2',11],
			[36,'运城3',11],
			[37,'大同市',12],
			[38,'大同市',12],
			[39,'大同市',12],
			]
				//1.通过id 获取 下拉框标签
				var prove=document.getElementById('prove');
				var city=document.getElementById('city');
				var county=document.getElementById('county');
				var str='<option>--请选择省份--</option>';
				//2.通过for循环获取数组中的数据，判断出省份
				for (var i=0;i<arr.length;i++){
					if (arr[i][2]==0)  {  //通过判断二维数组中 索引为 0 时 获取省份
					    str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';   //将获取的数据（省份）添加在省份的下拉框中，添加并通过索引 获取省份的value
			        }
				}
				prove.innerHTML=str;  //将获取的省份赋给下拉框中显示
				//3.用  onchange事件  判断省份下拉框内容改变时，显示城市需要的数据
				prove.onchange=function(){
					str='<option>--请选择城市--</option>';
					for (var i=0;i<arr.length;i++) {
						if (prove.value==arr[i][2]) {     //判断省份的value和  需要城市的索引是否相等来判断
							str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';  //将获取的数据（城市）添加在城市的下拉框中，添加并通过索引 获取省份的value
						}
					}
					city.innerHTML=str;
					county.innerHTML='<option>--请选择区县--</option>'
				}
				//4.用  onchange事件  判断城市下拉框内容改变时，显示城市需要的数据   思路和第三部一样
				city.onchange=function(){
					str='<option>--请选择区县--</option>';
					for (var i=0;i<arr.length;i++) {
						if (city.value==arr[i][2]) {
							str+='<option>'+arr[i][1]+'</option>';
						}
					}
					county.innerHTML=str;
				}
		</script>
	</body>
</html>