二级联动下拉列表

最新推荐文章于 2023-07-11 17:32:26 发布

java.小小白

最新推荐文章于 2023-07-11 17:32:26 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： js 列表 javascript html html5

男孩@qq1603853843

本文链接：https://blog.youkuaiyun.com/weixin_47427198/article/details/112918826

版权

前端专栏收录该内容

6 篇文章

订阅专栏

二级联动下拉列表需先选择英雄,才能在选择英雄的皮肤
html页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级联动</title>
	</head>

	<body>
		<form action="#" method="post">
		<!--先创建两个下拉列表-->
			请选择英雄 : <select name="hero" id="hero" onchange="skinA()"></select>

			请选择皮肤 : <select name="skin" id="skin">
				<option value="">请选择皮肤</option>
			</select>
		</form>
	</body>
</html>

js代码

	<script>
		//创建英雄库
		var heroArry = ["请选择英雄", "诺手", "小法", "厄加特"];
		//创建英雄皮肤库
		var skinArry = [
			["请选择皮肤"],
			["请选择皮肤", "生化骑士", "勇敢的心（两周年限定）", "灌篮高手"],
			["请选择皮肤", "白魔法师 维迦", "魔导绅士 维迦", "永恒之森 维迦"],
			["请选择皮肤", "深渊巨蟹 厄加特", "电锯狂人 厄加特 ", "战地机甲 厄加特"]
		];
		//获取到英雄的下拉列表
		var hero = document.getElementById("hero");
		//得到英雄皮肤的下拉列表
		var skin = document.getElementById("skin");
		skin.style.width = "120px";
		//一级列表最先载入页面
		window.onload = function heroA() {

			//获取长度,一共需要多少个子选项
			hero.length = heroArry.length;
			//获取子选项数组
			let op = hero.options;
			for(let i = 0; i < op.length; i++) {
				op[i].value = heroArry[i];
				op[i].text = heroArry[i];
			}
			//当英雄下拉列表的索引为0时,禁用皮肤的下拉列表
			forbidden();
		}

		//给英雄皮肤赋值
		function skinA() {
			forbidden();
			//获取当前选中的字列表的索引值
			let index = hero.selectedIndex;
			//			console.log(index);
			//根据这个索引值,得到英雄皮肤库的数组
			let heroSkinArry = skinArry[index];

			//这只皮肤下拉列表的个数
			skin.length = heroSkinArry.length;
			//获得下拉列表的数组
			let op = skin.options;
			//

			//遍历皮肤 向英雄皮肤的下拉列表里添加值
			for(let i = 0; i < op.length; i++) {
				op[i].value = heroSkinArry[i];
				op[i].text = heroSkinArry[i];
			}
			//将每个的第一个选项加上selected,每次默认选择第一个
			op[0].selected = "selected";
			//			console.log(op[0]);
		}
		//判断一级列表的索引,为索引值0时,代表请选择英雄,二级列表不可选择
		function forbidden() {
			if(hero.selectedIndex == 0) {
				skin.disabled = true;
			} else {
				skin.disabled = false;
			}
		}
	</script>