DOM（三）-05-(示例-下拉菜单-选择城市)

最新推荐文章于 2021-10-15 12:51:00 发布

wy_0928

最新推荐文章于 2021-10-15 12:51:00 发布

阅读量782

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47811017

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
下拉菜单：选择城市
二级联动菜单，即在第一级下拉菜单先选择xx省，然后第二级下拉菜单自动跳转当前所选省的所有城市，再选择xx市
-->

<html>
	<head>
		<style type="text/css">
			select{/*标签选择器*/
				width:100px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function selectCity(){
				
				/*
				 *由于第一级菜单的一个option对应第二级菜单的多个option，比如第一级菜单中的北京，在第二级菜单中有
				 *海淀区==多个可选项目，所以用二维数组，即大数组里面的第一个小数组代表一个省，该小数组里面的内容
				 *代表该省里的几个区，因为第一级select中有5个option，所以大数组里面5个小数组
				 */
				var collCities = [['选择市区']
									,['海淀区','朝阳区','东城区','西城区']
									,['南京','扬州','苏州','无锡']
									,['江宁区','栖霞区','鼓楼区','白下区']
									,['市区','江都','仪征','宝应']];
				/*
				 *这里同样可以键值对方式存储，更直观，如：
				 *var arr = {"beijing":['海淀区','朝阳区','东城区','西城区']};
				 *如果这样封装，要在对应option里面添加value="beijing"
				 */
				
				 //获取两个select节点对象
				 var oSelectNode = document.getElementById("selectid");//第一级下拉菜单对象
				 var oSubSelectNode = document.getElementById("subselectid");//第二级下拉菜单对象
				 
				 //获取第一级下拉菜单到底选择的是哪个option
				 var index = oSelectNode.selectedIndex;//【注意】index从0开始，即本程序中“北京“所在的option编号是1
				 
				 //通过角标去容器中获取对应的省市数组
				 var arrCities = collCities[index];
				 
				 /*
				  *为了防止下面不断添加新元素，即选择“北京”，子菜单出现北京的4个区，然后选择“江苏”，子菜单中不仅有江苏的
				  *4个城市，还有北京的4个区，所以必须在这里做删除动作，即每次在往子菜单里面添加新元素之前必须先清空子菜单中
				  *的元素。且子菜单中的第一个“选择市区”option不删除。
				  */
				  /*该方法可以实现删除子菜单中option的效果（第一个option不删除，如要删除，将循环初值x置为0即可）
				  for(var x=1;x<oSubSelectNode.options.length;x++){
					  
					  oSubSelectNode.removeChild(oSubSelectNode.options[x]);
					  x--;//这里x--的原因详见35-DOM-01
				  }
				 */
				 
				 //以下方法更简单，直接将子菜单长度置为1，即只保留第一个option
				 oSubSelectNode.length = 1;
				 
				 //遍历这个数组，并将这个数组的元素封装成option对象，添加到子菜单中
				 for(var x=0;x<arrCities.length;x++){
					 
					 var oOptionNode = document.createElement("option");
					 oOptionNode.innerHTML = arrCities[x];
					 oSubSelectNode.appendChild(oOptionNode);
				 }
			}
		
		</script>
		
		<select id="selectid" οnchange="selectCity()">
			<option>选择城市</option>
			<option>北京</option>
			<option>江苏</option>
			<option>南京</option>
			<option>扬州</option>
		</select>
		
		<select id="subselectid">
			<option>选择市区</option>
		</select>
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（三）-05-(示例-下拉菜单-选择城市)

 select{/*标签选择器*/ width:100px; } function selectCity(){ /* *由于第一级菜单的一个option对应第二级
复制链接

扫一扫