DOM23---Js级联菜单实现城市的选择

最新推荐文章于 2022-11-19 23:13:54 发布

onyas

最新推荐文章于 2022-11-19 23:13:54 发布

阅读量2k

点赞数 1

分类专栏： DOM 文章标签： Js级联菜单实现城市的选择

本文链接：https://blog.csdn.net/zheng0518/article/details/9074183

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

如图所示：

代码如下：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<link rel="stylesheet" type="text/css" href="table.css">
		<title></title>
		<style type="text/css">
			select
			{
				width:100px;
			}
		</style>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<script type="text/javascript">
			function selectCity()
			{
				var collCities=[['选择城市']
								,['海淀区','朝阳区','东城区','西城区']
								,['济南','青岛','烟台']
								,['福州','厦门','泉州','莆田']];
				//获取两个下拉菜单
				var oSelNode = document.getElementById("selid");
				var oSubNode = document.getElementById("subselid");
				//获取到底是哪个省
				var index = oSelNode.selectedIndex;
				//通过角标到容器中去获取对应的城市数组
				var arrCities = collCities[index];
				
				//添加之前，要先把之前的值清空
				/*
				for(var i=0;i<oSubNode.options.length;)
				{
					oSubNode.removeChild(oSubNode.options[i]);
				}
				*/
				//一个消空更方便的方法、、
				oSubNode.length=0;
				//遍历这个数组，把里面的数据放入第二个下拉菜单中
				for(var i=0;i<arrCities.length;i++)
				{
					var oOpNode = document.createElement("option");
					oOpNode.innerHTML = arrCities[i];
					oSubNode.appendChild(oOpNode);
				}
			}
		</script>
		<select id="selid" οnchange="selectCity()">
			<option>选择省市</option>
			<option>北京市</option>
			<option>山东省</option>
			<option>福建省</option>
		</select>
		<select id="subselid">
			<option>选择城市</option>
		</select>
	</body>
</html>

onyas

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM23---Js级联菜单实现城市的选择

如图所示：代码如下： select { width:100px; } function selectCity() { var collCities=[['选择城市'] ,['海淀区','朝阳区','东城区','西城区'] ,['济南','
复制链接

扫一扫