JQuery实现省市联动

最新推荐文章于 2023-08-18 18:17:12 发布

Establish career IT

最新推荐文章于 2023-08-18 18:17:12 发布

阅读量467

点赞数

分类专栏： web JQuery

本文链接：https://blog.csdn.net/weixin_43156133/article/details/102417203

版权

web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JQuery

1 篇文章 0 订阅

订阅专栏

JQuery实现省市联动

一：JQuery简介：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

二：JQuery实现省市联动的步骤分析：

第一步：确定事件(chang事件),在绑定的函数里面获取用户选择的省份。

第二步：创建二维数组来存储省份和城市。

第三步：遍历二维数组中的省份(与用户选择的省份进行比较)。

第四步：判断用户选择的省份和遍历的城市。

第五步：接着遍历数组中的城市。

第六步：创建一个城市文本节点。

第七步：创建一个option元素节点。

第八步：将文本节点添加到元素节点中(使用JQ的文档操作方法)。

第九步：获取第二个下拉列表并将option元素节点添加进去。

第十步：清除第二个下拉列表中的option内容。

三：技术分析:

1:数组遍历

2：文档操作：

3：清除操作：

四：示例代码实现：

//一定提前要将jquery库导进去
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				//2.创建二维数组存储省份和城市
				var cities=new Array(3);
				cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
				cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
				cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
				cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
				//当元素的值改变时发生 change 事件（仅适用于表单字段）。
                //change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
                //注意：当用于 select 元素时，change 事件会在选择某个选项时发生。
                //当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
                $("#province").change(function(){
                	//10.清除第二个下拉列表的内容
                	$("#city").empty();
                	//1:获取用户选择省份
                	var val=this.value;
                	//3:遍历二维数组中的省份
                	$.each(cities,function(i,n) {
                		//4.判断用户选择的省份和遍历省份
                		if(val==i){
                			//5.遍历改省份下的所有城市
                			$.each(cities[i],function(j,m){
                				//6.创建城市文本节点
                				var textnode=document.createTextNode(m);
                				//7.创建option元素节点
                				var opel=document.createElement("option");
                				//8.将城市文本节点添加到option元素节点中去
                				opel.append(textnode);
                				//9.将option元素节点追加到第二个下拉列表
                				$(opel).appendTo($("#city"));
                			});
                		}
                	});
                });
			});
		</script>

五：完整代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<title>使用jQuery完成省市二级联动</title>
		<style type="text/css">
			#bottom{
				text-align: center;
			}
			#contanier{
				border: 1px solid red;
				width: 99%;
				height: 600px;
				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 type="text/javascript" src="../js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				//2.创建二维数组存储省份和城市
				var cities=new Array(3);
				cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
				cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
				cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
				cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
				//当元素的值改变时发生 change 事件（仅适用于表单字段）。
                //change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
                //注意：当用于 select 元素时，change 事件会在选择某个选项时发生。
                //当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
                $("#province").change(function(){
                	//10.清除第二个下拉列表的内容
                	$("#city").empty();
                	//1:获取用户选择省份
                	var val=this.value;
                	//3:遍历二维数组中的省份
                	$.each(cities,function(i,n) {
                		//4.判断用户选择的省份和遍历省份
                		if(val==i){
                			//5.遍历改省份下的所有城市
                			$.each(cities[i],function(j,m){
                				//6.创建城市文本节点
                				var textnode=document.createTextNode(m);
                				//7.创建option元素节点
                				var opel=document.createElement("option");
                				//8.将城市文本节点添加到option元素节点中去
                				opel.append(textnode);
                				//9.将option元素节点追加到第二个下拉列表
                				$(opel).appendTo($("#city"));
                			});
                		}
                	});
                });
			});
		</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>
						<!--1.编写HTML文件部分的内容-->
						<tr>
							<td>籍贯</td>
							<td>
								<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
								<select id="province">
									<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>

验证结果：

Establish career IT

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
JQuery实现省市联动

JQuery实现省市联动一：JQuery简介：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它...
复制链接

扫一扫

专栏目录