JavaScript中利用二维数组实现三级联动

最新推荐文章于 2023-03-20 09:21:20 发布

IT-Xu_LongTeng

最新推荐文章于 2023-03-20 09:21:20 发布

阅读量509

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44269204/article/details/89371801

版权

JavaScript中三级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			var arr=[
				[1,'陕西省',0],
				[2,'甘肃省',0],
				[3,'四川省',0],
				[4,'山西省',0],
				
				[5,'西安市',1],
				[6,'咸阳市',1],
				[7,'宝鸡市',1],
				[8,'渭南市',1],
				
				[9,'兰州市',2],
				[10,'白银市',2],
				[11,'天水市',2],
				[12,'酒泉市',2],
				
				[13,'高新区',5],
				[14,'曲江区',5],
				[15,'浐灞区',5],
				[16,'户县',5],
				
				[17,'秦都区',6],
				[18,'渭城区',6],
				[19,'三原县',6],
				[20,'兴平市',6],
				
				[17,'西固区',9],
				[18,'安宁区',9],
				[19,'和平区',9],
				[20,'西站',9]
			];
			window.onload=function(){
				var provices=document.getElementById('provice');
				var citys=document.getElementById('city');
				var countys=document.getElementById('county');
				str='<option>--请选择省份--</option>';
				for(var i=0;i<arr.length;i++){
					if(arr[i][2]==0){
						//provices.innerHTML+='<option>'+arr[i][1]+'</option>';
						str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
						provices.innerHTML=str;
					}					
				}
				//获取省份的下拉对应的内容省
				provices.onchange=function(){
					str='<option>--请选择城市--</option>';
					//获取对应索引的值
					var indexValue=document.getElementById('provice').value;
					for(var i=0;i<arr.length;i++){
						//判断数组索引为2的数字和省份 下拉value一致
						if(arr[i][2]==indexValue){
							str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
						}
					}
					citys.innerHTML=str;
					countys.innerHTML='<option>--请选择区县---</option>';				
				}
				//获取城市的下拉事件
				citys.onchange=function(){
					str='<option>--请选择区县--</option>';
					var indexValue_city=document.getElementById('city').value;
					for(var i=0;i<arr.length;i++){
						if(arr[i][2]==indexValue_city){
							str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
						}
					}
					countys.innerHTML=str;					
				}
			}
			
		</script>
	</head>
	<body>
		<select id="provice">
			<option>--请选择省份--</option>
		</select>
		<select id="city">
			<option>--请选择城市--</option>
		</select>
		<select id="county">
			<option>--请选择区县--</option>
		</select>
	</body>
</html>