联动原理

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

省市数据

把省市数据,保存在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. while循环的讲解

    条件语句有两种方式: if() 条件语句 switch()   条件语句 循环语句: for() 循环语句 for in 遍历队象属性的循环 while 循环 案例:算出1到10的和 1.var i= ...

  2. [UE4]角色增加挂点、增加枪

    人物骨骼增加Socket(骨骼) 增加手持武器预览: 角色蓝图增加组件“Skeletal Mesh”(好像这叫骨骼模型吧),并拖放至人物“Mesh”下面作为子组件. 选中刚建好的“SkeletalMe ...

  3. Android RILD运行机制详解

    前言 在上一篇文章里(http://blog.csdn.net/jason_wzn/article/details/53232022),简要介绍了Android RIL的架构.这一篇文章,就来看一看R ...

  4. 【Linux_Unix系统编程】Chapter10 时间

    chapter10 时间 1:真实时间:度量这一时间的起点有二:(1)某个标准点:(2)进程生命周期内的某个固定时点(通常为程序启动) 2:进程时间:一个进程所使用的CPU时间总量,适用于对程序,算法 ...

  5. OpenGL chapter4 基础变换

    math3d库有两个数据类型,能够表示一个三维或四维向量: M3DVector3f M3DVector4f 4.3 理解投影 正投影 : 正交变换 透视投影 : 透视变换 表4.1 OpenGL变换术 ...

  6. Flex知识

    转载:http://www.cnblogs.com/xia520pi/archive/2011/12/11/2283851.html

  7. 使用for...of 优点，代替for...in，ｆｏｒＥａｃｈ和ｆｏｒ循环

    来自阮一峰ES6标准: http://es6.ruanyifeng.com/#docs/iterator

  8. JQ 确定与取消弹出框，选择确定执行Ajax

    $(function () { $("#GetCoupon").click(function () { function del() { var msg = "请确定领取 ...

  9. 隐藏bat脚本运行时弹出的黑窗口,以隐藏进程在后台执行.

    1.把这段代码写在前面@echo offif "%1"=="r" goto startif "%1"=="h" goto ...

  10. 2. select下拉框获取选中的值

    1.获取select选中的value值: $("#select1ID").find("option:selected").val();  --select1ID ...