js 三级联动2(添加了不同省时加载第一个市的同时加载对应的区)

桃扇骨 2021-07-25 00:44 134阅读 0赞

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		select{ 
    			width:200px;
    			height:35px;
    		}
    	</style>
    	
    	<script src="jquery-3.4.1.js"></script>
    </head>
    <body>
    
    	<span>省:</span>
    	<select name="" id="" class="sheng">
    		<option value="">请选择</option>
    	</select>
    	<span>市:</span>
    	<select name="" id="" class="shi">
    	</select>
    	<span>区:</span>
    	<select name="" id="" class="qu">
    	</select>
    
    	<script>
    
    		var shengSelect=document.querySelector(".sheng");
    		var shiSelect=document.querySelector(".shi");
    		var quSelect=document.querySelector(".qu");
    		var shengList=['河北','黑龙江','哈尔滨'];
    		var shiList=[['保定','石家庄'],['大庆','齐齐哈尔'],['尔滨','商丘']];
    		var quList=[[['保定1','保定2'],["石1","石2"]],[["庆1","庆2","庆3"],["齐1","齐2"]],[["哈1","哈3"],["商丘1","商丘2"]]];
    
    		var shengIndex=0;
    		var shiIndex=0;
    		//页面加载,省下拉框填充内容
    		for(var i=0;i<shengList.length;i++)
    		{ 
    			var shengOption=new Option(shengList[i]);
    			shengSelect.options.add(shengOption);
    
    		}
    		//选择省，加载市
    		shengSelect.onchange=function(event)
    		{ 	
    				var event=event||window.event;
    				
    				shengIndex=event.target.selectedIndex-1;
    				if(shengIndex==-1)
    				{ 
    					console.log("请选择省");
    					shiSelect.options.length=0;
    					quSelect.options.length=0;
    					
    				}else{ 
    					shiSelect.options.length=0;
    					for(var i=0;i<shiList[shengIndex].length;i++)
    					{ 
    						var shiOption=new Option(shiList[shengIndex][i]);
    						shiSelect.options.add(shiOption);
    					}
    					//加载市的同时，加载第一个市的所有区
    					for(var k=0;k<quList[shengIndex][0].length;k++)
    					{ 
    						quSelect.options.length=0;
    						var option=new Option(quList[shengIndex
    							][0][k]);
    						quSelect.options.add(option);
    					}
    				}
    
    
    		}
    		//选择市,加载区
    		shiSelect.onchange=function(event)
    		{ 
    
    			shiIndex=event.target.selectedIndex;
    			quSelect.options.length=0;
    			for(var i=0;i<quList[shengIndex][shiIndex].length;i++)
    			{ 
    				var quOption =new Option(quList[shengIndex][shiIndex][i]);
    				quSelect.options.add(quOption);
    			}
    		}
    
    	</script>
    	
    </body>
    
    </html>