案例八：实现省市二级联动

最新推荐文章于 2024-05-15 00:08:07 发布

真香号

最新推荐文章于 2024-05-15 00:08:07 发布

阅读量2.1k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/zhanshixiang/article/details/90524156

版权

JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

描述：实现省市二级联动
   技术分析：
   确定事件 onchange()
   创建一个二维数组(用于存储省份和城市)二维数组的创建？
   获取用户选择的省份(使用this.value作为参数传递);
   遍历二维数组(如果用户选择的省份与循环增加到某一个量的值相同，则遍历该省份下面的城市)
   创建文本节点和元素节点进行添加操作
   createTextNode()
   createElement()
   appendChild()

步骤分析：
   第一步：确定事件onchange()并为其绑定一个函数.
   第二步:创建一个二维数组,将市名添加进数组
   第三步:获取用户选择的省份
   第四步:遍历二维数组中的省份
   第五步:将用户选择的省份与二维数组中的省份进行比较
   第六步:如果相同,则遍历该省份下的所有城市
   第七步:创建城市文本节点
   第八步:创建option 元素节点
   第九步：向option节点中添加城市文本节点
   第十步：获取第二个下拉列表，将option元素节点加入列表
   第十一步：每次操作前清空第二个下拉列表option内容

代码实现：

<!DOCTYPE html>
<html>

	<head>
		<!--
        	作者：offline
        	时间：2019-05-23
        	描述：实现省市二级联动
        	技术分析：
        	确定事件 onchange()
        	创建一个二维数组(用于存储省份和城市)二维数组的创建？
        	获取用户选择的省份(使用this.value作为参数传递);
        	遍历二维数组(如果用户选择的省份与循环增加到某一个量的值相同，则遍历该省份下面的城市)
        	创建文本节点和元素节点进行添加操作
        	createTextNode()
        	createElement()
        	appendChild()
        	
        	
        	步骤分析：
        	第一步：确定事件onchange()并为其绑定一个函数.
        	第二步:创建一个二维数组,将市名添加进数组
        	第三步:获取用户选择的省份
        	第四步:遍历二维数组中的省份
        	第五步:将用户选择的省份与二维数组中的省份进行比较
        	第六步:如果相同,则遍历该省份下的所有城市
        	第七步:创建城市文本节点
        	第八步:创建option 元素节点
        	第九步：向option节点中添加城市文本节点
        	第十步：获取第二个下拉列表，将option元素节点加入列表
        	第十一步：每次操作前清空第二个下拉列表option内容
        -->

		<meta charset="UTF-8">
		<title>注册页面重新布局</title>
		<style type="text/css">
			.top {
				border: 1px solid red;
				width: 32.9%;
				height: 50px;
				float: left;
			}
			
			#clear {
				clear: both;
			}
			
			#menu {
				border: 1px solid blue;
				width: 99%;
				height: 40px;
				background-color: black;
			}
			
			#menu ul li {
				display: inline;
				color: white;
				font-size: 19px;
			}
			
			#bottom {
				text-align: center;
			}
			
			#contanier {
				border: 1px solid red;
				width: 99%;
				height: 600px;
				background: url(../img/regist_bg.jpg);
				position: relative;
			}
			
			#content {
				border: 5px solid gray;
				width: 50%;
				height: 60%;
				position: absolute;
				top: 100px;
				left: 300px;
				background-color: white;
				padding-top: 50px;
			}
		</style>

		<script>
			//2、创建一个二维数组,将市名添加进数组
			var cities = new Array(3);
			cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
			cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
			cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
			cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");

			function ChangeCity(val) {
				//获取第二个下拉列表
				var cityEle = document.getElementById("city");
				//每次操作前将option元素里面的内容清空
				cityEle.options.length = 0;
				//4、遍历二维数组中的省份
				for (var i = 0; i < cities.length; i++) {
					//5、将用户选择的省份与省份进行比较。注意是角标
					if (val == i) {
						//6、相同。则遍历	该省份下的所有城市
						for (var j = 0; j < cities[i].length; j++) {
						      //alert(cities[i][j]);
							//7、创建城市文本节点
							var textNode = document.createTextNode(cities[i][j]);
							//8、创建option 元素节点
							var opEle = document.createElement("option");
							//9、向option节点中添加城市文本节点
							opEle.appendChild(textNode);
							//10、获取第二个下拉列表，将option元素节点加入列表
							cityEle.appendChild(opEle);
						}
					}
				}
			}
		</script>
	</head>

	<body>
		<div>
			<!--1.logo部分的div-->
			<div>
				<!--切分为3个小的div-->
				<div class="top">
					<img src="../img/logo2.png" height="47px" />
				</div>
				<div class="top">
					<img src="../img/header.png" height="47px" />
				</div>
				<div class="top" style="padding-top: 15px;height: 35px;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			<!--清除浮动-->
			<div id="clear">
			</div>
			<!--2.导航栏部分的div-->
			<div id="menu">
				<ul>
					<li>首页</li>
					<li>电脑办公</li>
					<li>手机数码</li>
					<li>孕婴保健</li>
					<li>鞋靴箱包</li>
				</ul>
			</div>
			<!--3.中间注册表单部分div-->
			<div id="contanier">
				<div id="content">
					<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
						<form method="get" action="#" onsubmit="return checkForm()">
							<tr>
								<td colspan="2" align="center">
									<font size="5">会员注册</font>
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
								</td>
							</tr>
							<tr>
								<td>密码</td>
								<td>
									<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
								</td>
							</tr>
							<tr>
								<td>确认密码</td>
								<td>
									<input type="password" name="repassword" />
								</td>
							</tr>
							<tr>
								<td>email</td>
								<td>
									<input type="text" name="email" id="email" />
								</td>
							</tr>
							<tr>
								<td>姓名</td>
								<td>
									<input type="text" name="name" />
								</td>
							</tr>
							<!--1.编写HTML文件部分的内容-->
							<tr>
								<td>籍贯</td>
								<td>
									<!--确定事件-->
									<select onchange="ChangeCity(this.value)">
									<option>--请选择--</option>
									<option value="0">湖北</option>
									<option value="1">湖南</option>
									<option value="3">河北</option>
									<option value="2">河南</option>
									
								</select>
									<select id="city">
	
                                   </select>
								</td>
							</tr>
							<tr>
								<td>性别</td>
								<td>
									<input type="radio" name="sex" value="男" />男
									<input type="radio" name="sex" value="女" />女
								</td>
							</tr>
							<tr>
								<td>出生日期</td>
								<td>
									<input type="text" name="birthday" />
								</td>
							</tr>
							<tr>
								<td>验证码</td>
								<td>
									<input type="text" name="yanzhengma" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</form>
					</table>
				</div>
			</div>
			<!--4.广告图片的div-->
			<div id="">
				<img src="../img/footer.jpg" width="99%" />
			</div>
			<!--5.超链接与版权信息的div-->
			<div id="bottom">
				<a href="#">关于我们 </a>
				<a href="#">联系我们 </a>
				<a href="#">招贤纳士 </a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式 </a>
				<a href="#">服务声明 </a>
				<a href="#">广告声明 </a>
				<p>Copyright © 2005-2016 传智商城 版权所有 </p>
			</div>
		</div>
	</body>

</html>

效果：

没选择省份前：

选择省份后：

重新选择别的省份：

真香号

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
案例八：实现省市二级联动

描述：实现省市二级联动技术分析：确定事件 onchange() 创建一个二维数组(用于存储省份和城市)二维数组的创建？获取用户选择的省份(使用this.value作为参数传递); 遍历二维数组(如果用户选择的省份与循环增加到某一个量的值相同，则遍历该省份下面的城市) ...
复制链接

扫一扫