js selec对象操作、下拉框实现的三级联动

妖狐艹你老母 2021-07-24 20:32 459阅读 0赞

select 
    
    	添加option
    		var 对象=new Option(添加文本内容);
    		select对象.options.add(创建的Option对象);
    	
    	获取option选项的下标
    		select对象.selectedIndex;
    	
    	清除所有option数据
    		select对象.options.length=0;

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			select{ 
    				width:100px;
    				height:30px;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<p align="center">
    			<span>省:</span><select class="sheng">
    				<option value="">请选择</option>
    			</select>
    				<span>市:</span><select class="shi"></select>
    				<span>县:</span><select class="xian"></select>
    		</p>
    		
    		<script>
    			//获取页面元素
    			var shengSelect=document.querySelector(".sheng");
    			var shiSelect=document.querySelector(".shi");
    			var xianSelect=document.querySelector(".xian");
    			
    			//准备数据
    			var shengArr=['河南','河北','山西'];
    			var shiArr=[['郑州','洛阳','开封','商丘'],['保定','唐山','秦皇岛','石家庄'],['太原','大城','小街']];
    			var xianArr=[[['天津','大理'],['丽江','江南']],[["保定1","保定2"],["唐山1","唐山2"]]];
    			
    			var shengIndex=0;
    			
    			for(var i=0;i<shengArr.length;i++)
    			{ 
    				var option = new Option(shengArr[i]);
    				shengSelect.options.add(option);
    			}
    			
    			shengSelect.onchange=function(event){ 
    				var event=event||window.event;
    				
    				shengIndex=event.target.selectedIndex-1;
    				
    				shiSelect.options.length=0;
    				//添加市的数据
    				if(shengIndex==-1){ 
    					alert("请选择省");
    				}else{ 
    					
    					for(var i=0;i<shiArr[shengIndex].length;i++)
    					{ 
    						var option2=new Option(shiArr[shengIndex][i]);
    														
    						shiSelect.options.add(option2);
    						
    					}
    				
    				//添加县的第一个数据，因为当改变省而改变市的时候，不会触发市的onchange事件改变县
    						xianSelect.options.length=0;
    						for(var i=0;i<xianArr[shengIndex][0].length;i++)
    						{ 
    							var option3=new Option(xianArr[shengIndex][0][i]);
    							xianSelect.options.add(option3);
    						}
    					
    					
    				}
    			}
    			//添加县的数据
    			shiSelect.onchange=function()
    			{ 
    				
    				var shiIndex=this.selectedIndex;
    				
    				xianSelect.options.length=0;
    				for(var i=0;i<xianArr[shengIndex][shiIndex].length;i++)
    				{ 
    					var option3=new Option(xianArr[shengIndex][shiIndex][i]);
    					xianSelect.options.add(option3);
    				}
    				
    			}
    			
    			
    			//实现联动效果
    			//当省的select发生改变，填充市的数据
    		</script>
    	</body>
    </html>