用JS实现省市二级联动

最新推荐文章于 2025-06-19 11:36:06 发布

原创最新推荐文章于 2025-06-19 11:36:06 发布 · 1.6w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#JS #二级联动

html 同时被 2 个专栏收录

14 篇文章

订阅专栏

javaScript

9 篇文章

订阅专栏

本文介绍如何在网页注册表单中实现省市联动的下拉框功能。通过使用JavaScript和HTML，当用户选择省份时，能够动态更新对应的城市选项。此方案利用事件监听和DOM操作实现交互效果。

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

一、需求分析

我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。显示的效果如下：

二、技术分析

使用事件(onchange)

使用一个二维数组来存储省份和城市

获取用户选择的省份(使用方法传参的方式：this.value)

遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)

创建文本节点和元素节点并进行添加操作

createTextNode() 创建文本节点。

三、代码实现

<!DOCTYPE html>
<html>
	<head>
		<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;
			}
			
			#content{
				border: 5px solid gray;
				width: 50%;
				height: 60%;
				position: absolute;
				top: 100px;
				left: 300px;
				background-color: white;
				padding-top: 50px;
			}

		</style>
		
		<script>
			//1.创建一个二维数组用于存储省份和城市
			var cities = new Array(3);
			cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
			cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
			cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
			cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
			
			function changeCity(val){
				
				//7.获取第二个下拉列表
				var cityEle = document.getElementById("city");
				
				//9.清空第二个下拉列表的option内容
				cityEle.options.length=0;
				
				//2.遍历二维数组中的省份
				for(var i=0;i<cities.length;i++){
					//注意，比较的是角标
					if(val==i){
						//3.遍历用户选择的省份下的城市
						for(var j=0;j<cities[i].length;j++){
							//alert(cities[i][j]);
							//4.创建城市的文本节点
							var textNode = document.createTextNode(cities[i][j]);
							//5.创建option元素节点
							var opEle = document.createElement("option");
							//6.将城市的文本节点添加到option元素节点
							opEle.appendChild(textNode);
							//8.将option元素节点添加到第二个下拉列表中去
							cityEle.appendChild(opEle);
						}
					}
				}
			}
		</script>
		
	</head>
	<body>
		<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>
						<tr>
							<td>籍贯</td>
							<td>
								<select onchange="changeCity(this.value)">
									<option>--请选择--</option>
									<option value="0">湖北</option>
									<option value="1">湖南</option>
									<option value="2">河北</option>
									<option value="3">河南</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>
			
		</div>
	</body>
</html>