用JS实现下拉选单的联动

最新推荐文章于 2023-09-25 11:10:58 发布

dumzp13

最新推荐文章于 2023-09-25 11:10:58 发布

阅读量2.2k

点赞数 1

分类专栏：笔记小项目 javascript 文章标签： Web前端 javascript 笔记小项目

本文链接：https://blog.csdn.net/dumzp13/article/details/51069020

版权

笔记同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

小项目

11 篇文章 0 订阅

订阅专栏

需求：用JS实现一个下拉选单，要求在选中“地区”选单中相应的地区时，自动在“国家”选单中出现相应的国家。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>联动菜单</title>
	</head>
	<body>
		<p>地区：
			<select id="area" οnchange="change();">
				<option value="">请选择</option>
				<option value="1">亚洲</option>
				<option value="2">欧洲</option>
				<option value="3">非洲</option>
			</select>
		</p>
		<p>国家：
			<select id="country">
				<option>请选择</option>
			</select>
		</p>
	</body>
	<script type="text/javascript" src="select.js" ></script>
</html>

select.js

//假设接收到服务器传来的参数
var data = [
	["中国","朝鲜","日本"],
	["挪威","冰岛","葡萄牙"],
	["南非","津巴布韦","乌干达"]
]

function change(){
	var area = document.getElementById("area");
	var countrys = document.getElementById("country");
	var index = area.value;					
	var selects = data[index-1];			//通过选中下拉的选单value值获取数据
	
	var oldOptions = countrys.children;		//用children，数组内不会有多余属性(换行符)
	var length = oldOptions.length;			//！！注意，提前记录length原因：
											//如果在遍历删除过程中记录length，则length值会改变，删除会出错。
	for(var i=0;i<length;i++){				//删除原先选项的过程，若不删除，选项会一直堆积。
		countrys.removeChild(oldOptions[0]);//一直第一个元素，因为清除第一个以后，后面的元素会前移。如果按正常的i遍历，会出错！
	}
	
	if(index==0) return;					//如果选中的是"请选择"，就不再添加数据，避免报错（因为脚标是-1）
	
	for(var i=0;i<selects.length;i++){		//增加选项过程
		var option = document.createElement("option");
		option.innerHTML = selects[i];
		country.appendChild(option);
	}
}

dumzp13

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS实现下拉选单的联动

需求：用JS实现一个下拉选单，要求在选中“地区”选单中相应的地区时，自动在“国家”选单中出现相应的国家。联动菜单地区：请选择亚洲欧洲非洲国家：请选择 select.js//假设接收到服务器传来的参数var data = [ ["中国","朝
复制链接

扫一扫