[javascript] 实现二级联动菜单

最新推荐文章于 2022-04-12 23:36:35 发布

STILLxjy

最新推荐文章于 2022-04-12 23:36:35 发布

阅读量375

点赞数

分类专栏： javascript ——java——

本文链接：https://blog.csdn.net/STILLxjy/article/details/105873478

版权

——java—— 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

效果演示：
在这里插入图片描述

HTML代码：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

  <style type="text/css">
  	select{
		width:100px;
	}
  </style>

  <script type="text/javascript">
		var collCities = [['选择城市'],
							['海淀区','朝阳区','东城区','西城区'],
							['普陀区','静安区','浦东区','嘉定区'],
							['济南','青岛','烟台','威海'],
							['硚口区','武昌区','洪山区','青山区']];
		function selectCity(){
			//获取两个下拉菜单
			var oSelNode = document.getElementById("selid");
			var oSubSelNode = document.getElementById("subselid");

			//获取选择的省市
			var index = oSelNode.selectedIndex;
			var arrCities = collCities[index];

			//将子菜单清空
			oSubSelNode.length = 0;

			//将数组中的元素添加到子菜单中
			for(var x=0;x<arrCities.length;x++){
				var oOptNode = document.createElement("option");
				oOptNode.innerHTML = arrCities[x];

				oSubSelNode.appendChild(oOptNode);
			}
		}
  </script>

 </head>
 <body>
 	<select id="selid" onchange="selectCity()">
		<option>选择省市</option>
		<option>北京</option>
		<option>上海</option>
		<option>山东</option>
		<option>武汉</option>
	</select>

	<select id="subselid">
		<option>选择城市</option>
	</select>
 </body>
</html>

STILLxjy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[javascript] 实现二级联动菜单

效果演示：HTML代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> &...
复制链接

扫一扫