js二级联动

最新推荐文章于 2023-05-27 23:48:40 发布

l吕思玮

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量151

点赞数 1

文章标签： js 二级联动 onchange应用

本文链接：https://blog.csdn.net/Lvsiwei0719/article/details/89338964

版权

注意：onchange事件（元素改变）的应用

<body>
		省份：<select name="" id="select">
			<option>---请选择省份---</option>
		</select>
		城市：<select name="" id="select_01"></select>

		<script type="text/javascript">
			var arr_01=[
				[1,'陕西省',0],
				[2,'山西省',0],
				[3,'山东省',0],
				[4,'四川省',0],
				[5,'西安市',1],
				[6,'宝鸡市',1],
				[7,'渭南市',1],
				[8,'咸阳市',1],
				[9,'运城市',2],
				[10,'太原市',2],
				[11,'晋中市',2],
				[12,'大同市',2]
			];
			
			var sel=document.getElementById('select'); // 获取元素select
			var city=document.getElementById('select_01'); // 获取元素city

			for(var i=0;i<arr_01.length;i++){
				if(arr_01[i][2]==0){ // 如果第三列为0
					sel.innerHTML+='<option>'+arr_01[i][1]+'</option>'; // 设置页面元素--给sel添加option标签
				}
			}
			
			// 添加onchange事件 下拉框
			sel.function(){
				var num=sel.selectedIndex;
				if(num==1){  // 当sel的第几个索引为num时
					my(num);  // 调用该函数
				}else if (num==2) {
					city.innerHTML=' '; // 清除上次所选   注意是清除第一个option所属的下拉菜单
					my(num);
				}
			}
			
			// 定义一个函数
			function my(num){
				for(var i=1;i<arr_01.length;i++){
					if(arr_01[i][2]==num){ // 如果第三列为num，则在city里添加第二列为市的option标签
						city.innerHTML+='<option>'+arr_01[i][1]+'</option>';
					}
				}
			}
		</script>
	</body>

l吕思玮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js二级联动

注意：onchange事件（元素改变）的应用<body> 省份：<select name="" id="select"> <option>---请选择省份---</option> </select> 城市：<select name="" id="select_01"></select> &...
复制链接

扫一扫