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

最新推荐文章于 2024-07-03 00:07:29 发布

神奇大叔

最新推荐文章于 2024-07-03 00:07:29 发布

阅读量762

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103357018

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

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>