简易的关联下拉菜单

最新推荐文章于 2024-07-14 12:56:18 发布

weixin_43362799

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量115

点赞数

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/weixin_43362799/article/details/126719912

版权

非常简单的一个关联菜单

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 先生成选取省份的下拉列表 -->
		<select id="province">
			
		</select>
		<!-- 再生成选取省份对应城市的下拉列表 -->
		<select id="city">
			
		</select>
		<script>
			var arr1 = ['广东省','浙江省','河南省']
			var arr3 = [
				['广州','深圳','珠海','惠州'],
				['杭州','宁波','绍兴'],
				['郑州','商丘','洛阳','开封']
			]
			// 将对应省份先生成并保存
			var str1=''
			for(var i = 0 ; i <arr1.length;i++){
				str1 += `<option> ${arr1[i]} </option>`
			}
			// 设置成选项
			province.innerHTML = str1
			// 当每次点击省份时重新生成对应城市
			province.onclick = function(){
				var str = ''
				for (var i = 0 ; i < arr3[arr1.indexOf(province.value)].length ; i++){
					str += `<option> ${arr3[arr1.indexOf(province.value)][i]} </option>`
				}
				city.innerHTML = str
			}
			
		</script>
	</body>
</html>