联动原理

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

省市数据

把省市数据,保存在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. SpringCloud使用jpa之Rest方式

    这个与上一篇的基本相同,需要修改的只有Dao层的文件: TablesDao.java package com.shinho.dao; import org.springframework.data.j ...

  2. 在ie6下的png图片的兼容问题

    png图片在ie6下是这样的: 正确样式: 这样解决: html代码: <body> <div class="gys"></div> </ ...

  3. 基于WMI获取本机真实网卡物理地址和IP地址

    using System; using System.Collections.Generic; using System.Management; using System.Runtime.Intero ...

  4. css position小结

    relative:可使top,right,bottom,left等相对于自身位置来进行偏移:若无则这些偏移都不会起作用 absolute:寻找离自己最近position为relative或absolu ...

  5. Python - Django - ORM 操作表

    ORM 的对应关系: 类        --->    数据库表对象     --->    数据库行属性     --->    字段 操作数据库表     --->     ...

  6. LinkedHashMap唯一，存储取出有序

    package cn.itcast_03; import java.util.LinkedHashMap; import java.util.Set; /* * LinkedHashMap:是Map接 ...

  7. QT中使用自己定的类和Vector出现错误

    关于QT自定义类不能调用问题: 在Main()函数里面一定要定义include“XXX.cpp”include“XXX.h”,具体原因我也不知道为什么这样定义,是在一个贴吧看见的,弄了好久才解决. 第 ...

  8. idea-activate code

    N757JE0KCT-eyJsaWNlbnNlSWQiOiJONzU3SkUwS0NUIiwibGljZW5zZWVOYW1lIjoid3UgYW5qdW4iLCJhc3NpZ25lZU5hbWUiO ...

  9. CENTOS 挂载ntfs移动硬盘

    参考网址: http://www.it610.com/article/3368930.htm (较全)http://blog.51cto.com/ultrasql/1927672

  10. openlayers-热地图加载（完整版及代码）

    //地圖加載function mapInit(data){ //底图// var raster = new ol.layer.Tile({// source: new ol.source.Stamen ...