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

àì夳堔傛蜴生んèń 2022-04-24 06:12 281阅读 0赞

## 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>