联动原理

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

省市数据

把省市数据,保存在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. canvas基础之变换

    2D绘制上下文支持各种基本的绘制变换: rotate(angle):围绕原点旋转图像angle弧度.(举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180.) scale(scaleX ...

  2. 如何干净的清除Slave同步信息

    MySQL> show master status; +------------------+-----------+--------------+------------------+---- ...

  3. [Python] numpy.logspace

    numpy.logspace(start, stop, num=50, endpoint=True, base=10.0, dtype=None) starting value  :=  base** ...

  4. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  5. RNN循环神经网络结构

    note: RNN处理有序的数据.例如一句话 一层双向的循环神经网络示意图(没有 S0' 则为单层循环): 正向循环S0 到 Si:y1的值受X1,A1以及上一层的A0影响 反向循环Si 到 S0:y ...

  6. classification-softmax

    softmax分类 import tensorflow as tf import numpy as npfrom input_data import read_data_sets mnist = re ...

  7. centos7.3安装zip,unzip

    安装命令: yum install -y unzip zip

  8. springboot ssl http转Https

    参考:https://www.cnblogs.com/imfjj/p/9058443.html   (里面有坑) https://blog.csdn.net/l4642247/article/deta ...

  9. bootStrap 教程 文档

    参考1: https://www.w3schools.com/bootstrap/default.asp 参考1:http://www.runoob.com/bootstrap/bootstrap-i ...

  10. HTML 表格标签

    <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, ce ...