Jquery完成省市联动

Leefs 2019-11-14 PM 2602℃ 0条

# Jquery完成省市联动

### 前言

**省市联动效果展示**

![Jquery完成省市联动01.png][1]

点击籍贯中的省份，后面的城市名称也会根据选择的省份发生相应的变化。

类似省市联动的效果是我们在做表单时经常会遇到的问题，这部分效果的代码实现也是一个难点。

下面，小编就带着大家通过一个小Demo来分析一下省市联动效果实现的步骤。只要将实现的思想给分析清楚，以后在工作中遇到类似的问题就会好解决很多。

### 代码

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成省市二级联动</title>
		<style type="text/css">
			#contanier{
				border: 1px solid red;
				width: 99%;
				height: 600px;
				background: url(../img/footer.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 type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.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事件(仅适用于表单字段)
				$("#province").change(function(){
					//10.清除第二个下拉列表的内容
					$("#city").empty();
					
					//1.获取用户选择的省份
					var val = this.value;
					//alert(val);
					//3.遍历二维数组中的省份
					$.each(cities,function(i,n){
						//alert(i+":"+n);
						//4.判断用户选择的省份和遍历的省份
						if(val==i){
							//5.遍历该省份下的所有城市
							$.each(cities[i], function(j,m) {
								//alert(j+":"+m);
								//6.创建城市文本节点
								var textNode = document.createTextNode(m);
								//7.创建option元素节点
								var opEle = document.createElement("option");
								//8.将城市文本节点添加到option元素节点中去
								$(opEle).append(textNode);
								//9.将option元素节点追加到第二个下拉列表中去
								$(opEle).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="#" οnsubmit="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" οnfοcus="showTips('username','必须以字母开头')" οnblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
							</td>
						</tr>
						<tr>
							<td>密码</td>
							<td>
								<input type="password" name="password" id="password" οnfοcus="showTips('password','密码长度不能低于6位！')" οnblur="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 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="#" />
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<input type="submit" value="注册" />											
							</td>
						</tr>
						</form>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>
```

*代码来源于网络：[原文链接地址](https://blog.csdn.net/a502367897/article/details/80956289)*

以上是整个过程的完整代码，直接通过CV大法就可以实现效果

> 代码说明

1. 1.change:当元素的值改变时发生change事件(仅适用于表单字段)

2.  2.**$.each(cities,function(i,n){}**循环遍历，`Jquery`遍历对象的一种方式

**cities:要遍历的对象**

**i:对象的序号**

**n:对象序号中的值**

3. 3.HTML元素通常由元素节点和文本节点组成

`createTextNode():`可创建文本节点。

`createElement():`可创建元素节点。

> 代码分析

> 1. 1.获取用户选择的省份
>
> 2. 2.创建二维数组用于存储省份和城市
> 3. 3.遍历二维数组中的省份
> 4. 4.判断用户选择的省份和遍历的省份
> 5. 5.遍历该省份下的所有城市
> 6. 6.创建城市文本节点
> 7. 7.创建option元素节点
> 8. 8.将城市文本节点添加到option元素节点中去
> 9. 9.将option元素节点追加到第二个下拉列表中去
> 10. 10.清除第二个下拉列表的内容

大家可以复制上方的代码，进行输出调试一下，然后根据步骤去理解。

[1]: https://lilinchao.com/usr/uploads/2019/11/1006427963.png

标签: 前端, Jquery

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/174.html

上一篇 JVM学习(四)--编译期常量与运行期常量的区别以及数组创建本质分析

下一篇 JVM学习(五)--类加载器准备阶段和初始化阶段的重要意义分析

Jquery完成省市联动

评论啦~

栏目分类

标签云

友情链接申请

Jquery完成省市联动

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请