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

来源：互联网发布：小码哥java大神班视频编辑：程序博客网时间：2024/06/08 03:26

还记得之前我使用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完成省市二级联动的效果！

1 0