二级联动菜单 JavaScript

最新推荐文章于 2024-02-06 18:47:33 发布

霜序0.2℃

最新推荐文章于 2024-02-06 18:47:33 发布

阅读量110

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/Dueser/article/details/120579780

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM 练习

在这里插入图片描述
忘了参考哪篇文章了…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联动</title>
</head>
<body>
<label for="city"></label><select name="省市" id="city"></select>
<label for="area"></label><select name="市区" id="area"></select>

<script>
	let cityS = ['请选择市', '珠海市', '中山市'];
	let district = [
		['请选择区'],
		['香洲', '金湾', '斗门'],
		['三乡', '坦洲', '石岐']
	];
	let city = document.getElementById('city');
	let area = document.getElementById('area');
	//一级菜单初始化
	city.length = cityS.length;
	for (let i = 0; i < cityS.length; i++) {
		city.options[i].text = cityS[i];
	}
	//二级菜单初始化
	area.length = 1;
	area.options[0].text = district[0][0];

	city.onchange = function () {
		let index = city.selectedIndex;
		area.length = district[index].length;
		for (let i = 0; i < area.length; i++) {
			area.options[i].text = district[index][i];
		}
	}
</script>
</body>
</html>

霜序0.2℃

关注

0
点赞
踩
0

收藏

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

DOM 练习忘了参考哪篇文章了…<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>联动</title></head><body><label for="city"></label><select name="省市" id="city"></select&g
复制链接

扫一扫