您的位置：首页 > Web前端 > JQuery

一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果

2017-05-10 20:57 579 查看
还记得之前我使用JavaScript来实现省市二级联动的效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(八)——使用JavaScript完成省市联动的效果！之前在注册页面上有一个籍贯的信息需要用到省市二级联动的效果，现在我就来使用jQuery完成该效果。

要使用jQuery完成省市二级联动的效果，必然要了解以下知识点：

jQuery中的DOM操作

查看jQuery API帮助文档可知，jQuery中有关DOM操作的方法有：



我列出最常用的方法：

append()
：向每个匹配的元素内部追加内容

appendTo()
：把所有匹配的元素追加到另一个指定的元素中

remove()
：从DOM中删除所有匹配的元素

给出一个案例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
<script>
$(function() {
$("#but1").click(function() {
// 往p元素的后面追加一些内容
$("p").append("<b>bbbb</b>");
});

$("#but2").click(function() {
// 将p元素添加到id为d1的div元素当中
$("p").appendTo("#d1");
});

$("#but3").click(function() {
// 设置p元素的内容
$("p").html("bbbb");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="添加元素" />
<input type="button" id="but2" value="添加元素" />
<input type="button" id="but3" value="覆盖元素内容" />
<p>
aaaa
</p>

<div id="d1"></div>
</body>
</html>


jQuery中遍历数组和对象的操作

jQuery.each(object, [callback])
是jQuery中的通用例遍方法，可用于例遍对象和数组。它有两种遍历的方式：

遍历的方式一：

$.each(object,function(i,n){ // i：代表遍历的下标，n：遍历后得到的每一个值

});


object是原生JavaScript对象，且
i
代表遍历的下标，
n
代表遍历后得到的每一个值。

遍历的方式二：

$(object).each(function(i,n){

});


object是原生JavaScript对象。

给出案例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
<script>
$(function() {
var arrs = new Array("张飞","关羽","刘德华");
// 将arrs这个数组转成JQ对象再使用each方法
/*$(arrs).each(function(i, n) {
alert(i + " " + n);
});*/

$.each(arrs, function(i, n) {
alert(i + " " + n);
});
});
</script>
</head>
<body>
</body>
</html>


读者在了解完以上知识点之后，可下面按照如下步骤来使用jQuery完成省市二级联动的效果：

引入注册页面，引入jQuery的类库

获得到第一个下拉列表，并触发change事件

获得到被选中的下拉列表框中的值

去数组中进行比对

将数组中的值遍历获得到

创建元素，创建文本，将文本添加到元素中，再将元素添加到第二个列表中

我摘出注册页面，内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
div{
border:1px solid blue;
}

.bodyDiv{
width:90%;
}

.bodyDiv > div{
width:100%;
}

.logoDiv{
width:33%;
height:50px;
float:left;
}

.clear{
clear:both;
}

ul li{
display:inline;
}

a:link{
color:blue;
}

a:visited{
color:#FFFF00;
}

a:hover{
color:green;
font-size: 20px;
}

a:active{
color:red;
font-size:30px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
</head>
<body>
<!--整体DIV-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="50"/>
</div>
<div class="logoDiv">
<img src="../img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top:0px;padding-top:10px;height:40px;">
<a href="#">登录</a>
<a href="#" id="reg">注册</a>
<a href="#">购物车</a>
</div>
<div class="clear"></div>
</div>
<div style="height:50px;background-color: black;color:white;font-size: 20px;">
<ul >
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<div style="height:500px;background-image: url(../img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color:white;position:absolute;left:350px;top:160px;width:600px;">
<form action="../index.html" method="post">
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username"><span id="usernameSpan"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password"><span id="passwordSpan"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province" name="province">
<option value="">-请选择-</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
<select id="city" name="city">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<div>
<center>
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</div>
</body>
</html>


接下来我就来编写jQuery代码完成省市二级联动的效果，还记得我之前是怎么定义一个二维数组的吗？算了，直接贴出代码：

// 定义一个二维数组
var arrs = new Array(5);
arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施市");
arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
arrs[4] = new Array("长春市","吉林市","四平市","延边市");


而在这儿我将换一种方式定义一个二维数组，如下：

var cities = [
["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
["南京市","苏州市","扬州市","无锡市"],
["武汉市","襄阳市","荆州市","宜昌市","恩施市"],
["石家庄市","唐山市","保定市","邢台市","廊坊市"],
["长春市","吉林市","四平市","延边市"]
];


这样，完成省市二级联动效果的jQuery代码就该这样编写：

<script>
$(function() {
var cities = [
["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
["南京市","苏州市","扬州市","无锡市"],
["武汉市","襄阳市","荆州市","宜昌市","恩施市"],
["石家庄市","唐山市","保定市","邢台市","廊坊市"],
["长春市","吉林市","四平市","延边市"]
];

var $city = $("#city");

// 获得代表省份的下拉列表
$("#province").change(function() {
// alert(this.value);
// alert($(this).val());

// 清空第二个列表中的内容
$city.get(0).options.length = 1;

var val = this.value;
// 遍历并且判断
$.each(cities, function(i, n) {
// 判断
if(i == val) {
$(n).each(function(j, m) {
// alert(j + " " + m);
$city.append("<option>" + m + "</option>");
});
}
});
});
});
</script>


读者如需查看完整代码，可参考一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航