联动原理

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

省市数据

把省市数据,保存在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. 纯文本文件 numbers.txt, 里面的内容（包括方括号）如下所示

    from collections import OrderedDict import xlwt with open('student.txt','r') as f: number_list = jso ...

  2. R语言学习——欧拉计划（1）Multiples of 3 and 5

    [题目一]If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. ...

  3. [转]CSKIN 作者分享的图片处理类

    本代码来自:http://bbs.cskin.net/forum.php?mod=viewthread&tid=113&fromuid=2446 里面没有我想找的任意角度旋转的方法,代 ...

  4. 运用map并于执行期指定排序准则

    该例展示以下技巧: 如何使用map 如何撰写和使用仿函数 如何在执行期定义排序规则 如何在"不在乎大小写"的情况下比较字符串 #include<iostream> #i ...

  5. Web 过滤器参数设置问题

    问题描述: 在代码定义了3个过滤器,分别为filter1,filter2,filter3,过滤的Servlet范围分别是"/*","/Servlet1",&qu ...

  6. python Web开发你要理解的WSGI & uwsgi详解

    原文:https://www.jb51.net/article/144852.htm WSGI协议 首先弄清下面几个概念: WSGI:全称是Web Server Gateway Interface,W ...

  7. Spark SQL 基本原理

    Spark SQL 模块划分 Spark SQL架构--catalyst设计图 Spark SQL 运行架构 Hive的兼容性

  8. solr .Net端(SolrNet)

    首先 引用SolrNet.dll Microsoft.Practices.ServiceLocation HttpWebAdapters 也可以用.net IDe 中的 nuget下载 solrnet ...

  9. jQuery更新

    jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行 ...

  10. SignalR (二）

    在上节中,我们已经初步对 SignalR 进行了了解,这一节我们将做一个SignalR Demon,具体的步骤如下: 1. 创建一个 mvc 4 web 应用程序,并选择 Basic 2. 创建一个 ...