当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQuery代码实现省市联动

JQuery代码实现省市联动

2018年04月28日  | 移动技术网IT编程  | 我要评论

本文描述JQ方式实现省市联动

用到的知识点：JQ文档操作方法

append()在元素后面添加内容

appendTo()把元素移动到指定的元素中

遍历

方式一：.each(数组，function(i，n)),其中i为下标，n表示下标对应的数组[i]的值

方式二：.each(数组，function(i，n)),其中i为下标，n表示下标对应的数组[i]的值

方式三：(数组).each(function(j,m){});其中j和m可以不写如果不需要显示出来m的值。如果需要显示出来的话是需要写的。

一·过程分析

1-需要做一个html页面 包括省份和城市的如下：

  省份：<select id="provence">
                    <option value="0" name="provence">河南省</option>
                    <option value="1" name="provence">安徽省</option>
                    <option value="2" name="provence">江苏省</option>
                    <option value="3" name="provence">河北省</option>
                </select>
            城市：<select id="city">
                    <option value="0" name="city">请选择</option>
                </select>

2-需要准备一个二维数组盛放城市

//              利用二维数组来表示城市，注意对应关系
            var cities = [
            ["商丘市","鹿邑县","许昌市","开封市","郑州市"],
            ["合肥市","淮南市","马鞍山市","六安市","亳州市"],
            ["南京市","苏州市","扬州市"],
            ["沧州市","泊头市","天津市"]
            ];

3-需要引入js

采用cdn方式

<script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>

4-写JS用到两次遍历。

首先需要获得省份的对象和城市的对象，其中省份的对象需要监听改变时间，JS原生的是onChange属性，JQ是把on都去掉了而且变成了方法。$("#provence").change(funciton(){

通过这个可以把html对应的value下标取到，可以对应到二维数组的下标（这个是刻意设计的需要注意）

            $(function(){//入口函数
                //获得城市对象的下拉框
            var $city = $("#city");
//              利用二维数组来表示城市，注意对应关系
            var cities = [
            ["商丘市","鹿邑县","许昌市","开封市","郑州市"],
            ["合肥市","淮南市","马鞍山市","六安市","亳州市"],
            ["南京市","苏州市","扬州市"],
            ["沧州市","泊头市","天津市"]
            ];
        //获得省份的对象

           $("#provence").change(function(){
            $city.get(0).length = 0;
            var val = this.value;
             $.each(cities, function(i,n) {
                if (val == i    ) {
                    $(n).each(function(j,m){
                        //创建对象，并且添加到城市下拉框中
                        $city.append("<option name='city'>"+m+"</option>")
                    });
                }
             });
           });

            });

二·总结

省市联动主要考察遍历数组和添加到元素中，其中有个地方需要注意那就是在添加元素之前需要把城市节点的元素先清除，有两个方式一个是采用JS原生的方式，把元素的长度置为1（这是因为城市中还有一个“请选择“的节点原因。）方式二：通过JQ对象的each方法把值都置为空。

三·全部代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
        <script>
            $(function(){//入口函数
                //获得城市对象的下拉框
            var $city = $("#city");
//              利用二维数组来表示城市，注意对应关系
            var cities = [
            ["商丘市","鹿邑县","许昌市","开封市","郑州市"],
            ["合肥市","淮南市","马鞍山市","六安市","亳州市"],
            ["南京市","苏州市","扬州市"],
            ["沧州市","泊头市","天津市"]
            ];
        //获得省份的对象

           $("#provence").change(function(){
            $city.get(0).length = 1; //方式一：采用原生的方式把长度置为1；

//          $city.each(function(i,n){ 这种方式不可行，好像i一直都是0，目前还不知道为何原因
//              alert(i);
//              n = null;
//          });
            var val = this.value;
             $.each(cities, function(i,n) {
                if (val == i    ) {
                    $(n).each(function(j,m){
                        //创建对象，并且添加到城市下拉框中
                        $city.append("<option name='city'>"+m+"</option>")
                    });
                }

             });
           });

            });

        </script>

    </head>
    <body>

        <!--
            作者：伦哥哥
            时间：2018-04-22
            描述：1.生成两个下拉框  省份下拉框  城市下拉框

        -->
        省份：<select id="provence">
                    <option value="0" name="provence">河南省</option>
                    <option value="1" name="provence">安徽省</option>
                    <option value="2" name="provence">江苏省</option>
                    <option value="3" name="provence">河北省</option>
                </select>
            城市：<select id="city">
                    <option value="0" name="city">请选择</option>
                </select>
    </body>
</html>

至于方式二为何不可以，目前还不能够解决

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网