联动原理

当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息.

省市数据

把省市数据,保存在js文件中,以json形式保存,以便读取,下面代码使用部分数据,不影响效果。

cities.js文件如下：

var china = [

    {

        "p_name": "吉林省",

        "p_id": "jl",

        "cities": [

            {

                "c_name": "长春",

                "c_id": "cc"

            },

            {

                "c_name": "四平",

                "c_id": "sp"

            },

            {

                "c_name": "通化",

                "c_id": "th"

            },

            {

                "c_name": "松原",

                "c_id": "sy"

            }

        ]

    },

    {

        "p_name": "辽宁省",

        "p_id": "ln",

        "cities": [

            {

                "c_name": "沈阳",

                "c_id": "sy"

            },

            {

                "c_name": "大连",

                "c_id": "dl"

            },

            {

                "c_name": "抚顺",

                "c_id": "fs"

            },

            {

                "c_name": "铁岭",

                "c_id": "tl"

            }

        ]

    },

    {

        "p_name": "山东省",

        "p_id": "sd",

        "cities": [

            {

                "c_name": "济南",

                "c_id": "jn"

            },

            {

                "c_name": "青岛",

                "c_id": "qd"

            },

            {

                "c_name": "威海",

                "c_id": "wh"

            },

            {

                "c_name": "烟台",

                "c_id": "yt"

            }

        ]

    },

    {

        "p_name": "上海市",

        "p_id": "sh",

        "cities": [

            {

                "c_name": "闵行区",

                "c_id": "mh"

            },

            {

                "c_name": "徐汇区",

                "c_id": "xh"

            },

            {

                "c_name": "黄浦区",

                "c_id": "hp"

            },

            {

                "c_name": "浦东新区",

                "c_id": "pd"

            }

        ]

    }

];
 

获取省市数据

通过js dom编程读取省市数据,把省市数据读取到对应的select选项中.

注意： 记得引入cities.js文件

<!DOCTYPE html>

<html>

  <head>

    <title>二级联动</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

  </head>

  <body>

     <select id="province" name="province">

       <option value="none">--请选择省--</option>

    </select>

      <select id="city" name="city">

          <option value="none">--请选择市--</option>

      </select>

      <!-- 载入省市数据 -->

      <script type="text/javascript" src="cities.js"></script>

      <script type="text/javascript" >

        //获得省级下拉框对象

        var province = document.getElementById("province");

        //遍历省市数据,并把里面省的数据追加到option选项中

        for (var i=0; i<china.length; i++) {

            var option = document.createElement("option");

            option.value = china[i].p_id;

            option.innerHTML = china[i].p_name;

            province.appendChild(option);

        }

          //省级下拉框发生改变事件

          province.onchange = function() {

            //获取当前点击对象的值

            var proid = this.value;

            var cities;

            //遍历省市数据,把省级下点击的那一个选项的值和省市数据中的

            //省级数据对比,如果相等,取出当前的市的数据

            for (var i=0; i<china.length; i++) {

                if (proid == china[i].p_id) {

                    cities = china[i].cities;

                }

            }

            //获得市级下拉框对象

            var city = document.getElementById("city");

            //每次点击省级后,市级初始化,避免高级重复追加

            city.innerHTML = "<option value='none'>--请选择市--</option>";

            //遍历市级数据,并取出市级数据,追加到市级对象中

            for (var i=0; i<cities.length; i++) {

                var option = document.createElement("option");

                option.innerHTML = cities[i].c_name;

                option.value = cities[i].c_id;

                city.appendChild(option);

            }

          }

      </script>

  </body>

</html>
 

二级联动效果

原文地址：https://www.cnblogs.com/loveyous/p/7492674.html

js：二级联动示例的更多相关文章

  1. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  2. Ext.js二级联动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

  3. js二级联动

    <body> <section> <a>省份</a> <select id="province"> <option ...

  4. js 二级联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JS实现下拉列表的二级联动

    这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,动态的联动需要检索数据库,这个对不需要更新的二级联动比较实用.这里 ...

  6. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  7. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  8. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  9. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

随机推荐

  1. man page ，info page 和/usr/share/doc/整理自鸟哥

    - 比如查看date指令   - 命令:vbird@www ~]$ man date   - 返回示例(部分):DATE(1) User Commands DATE(1)   - 部分释义(注释2): ...

  2. 杂项-分布式-EDAS：深度解析阿里云EDAS服务

    ylbtech-杂项-分布式-EDAS:深度解析阿里云EDAS服务 1.返回顶部 1. 深度解析阿里云EDAS服务 弹性伸缩 摘要: 第一种只适用于业务较少的情况,而在新业务不断增加的情况下,增加新应 ...

  3. Bootstrap：教程、简介、环境安装

    ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...

  4. [转]Java. SqlServer 使用

    public void add(Emp emp) throws Exception { String connectionUrl = "jdbc:sqlserver://localhost: ...

  5. shell脚本函数

    不调用就不执行 调用就执行 调用时候的$1是指执行时候的参数1 调用之后的$是位置参数

  6. Game of War - Fire Age 有何特别之处？

    作者:福克斯007 链接:https://www.zhihu.com/question/21611550/answer/52458767来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  7. 对象DIY

    1.在java开发中,好代码都是组织的比较好,模拟现实很好,而不是步骤指令 2.对象组织+继承(归类

  8. 蓝瓶的钙，好喝的钙——windows,我要蓝屏的

    原文地址:http://80x86.io/post/windows-blue-screen-0x00000050-page_fault_in_nonpaged_area 这里只截取一部分. windo ...

  9. MySQL数据库储存引擎Inoodb一--记录储存结构

    在开文我先说明一下,接下来的数据库知识文章都是在微信公众号“我们都是小青蛙”学习然后在通过自己的理解进行书写的.有兴趣的朋友可以去关注这个微信公众号.话不多说,我们在日常使用数据库进行数据持 久化的时 ...

  10. 地址解析协议ARP（Address Resolution Protocol）

    1.引言 说明: ARP的作用,解决了什么问题: 以太网中的链路层,可能会采用不同的网络技术,而且不以ip作为路由依据. 链路层以mac地址作为路由依据. ARP的功能是在32 bit的IP地址和采用 ...