下拉列表级联菜单操作

最新推荐文章于 2025-08-06 14:36:16 发布

Jeep_Dom

最新推荐文章于 2025-08-06 14:36:16 发布

阅读量6.8k

点赞数

分类专栏： Javascript 文章标签： javascript 级联菜单

Javascript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的城市选择器功能。当用户从省份下拉菜单中选择一个选项时，相应的城市将自动加载到第二个下拉菜单中。该示例展示了如何通过简单的脚本和DOM操作来增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
	function selcity(){
		var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"],
		           ["长沙","郴州","岳阳","株洲"],["广州","深圳","惠州","东莞"]];
		var index = document.getElementById("selID").selectedIndex;
		var subNode = document.getElementById("subID");
		var citys = arr[index];		 
		
		subNode.options.length = 0;   //清空之前选项
		for(var x=0;x<citys.length;x++){
			var optNode = document.createElement("option");
			optNode.innerText = citys[x];
			subNode.appendChild(optNode);  //选择添加到子选项中
		}
	}
</script>
<style type="text/css"> 
	
</style>
</head>
<body>
	<select id="selID" onchange="selcity()">
		<option>--选择省市--</option>
		<option>北京</option>
		<option>山东</option>
		<option>湖南</option>
		<option>广东</option>
	</select>
	
	<select id="subID">
		<option>--选择城市--</option>
	</select>
</body>