省市联动效果的简单实现代码(推荐)


Posted in Javascript onJune 06, 2016

下拉框二级联动效果在日常应用场景中经常会碰到,尤其是涉及地区、品种等有多级选项时。例如:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变。

省市联动效果的简单实现代码(推荐)

思路:

1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化。

下面是造的省市的数据:

var linkDatas = {
      provinces:[
        {
          "code":"0",
          "name":"请选择"
        },
        {
          "code":"1",
          "name":"北京"
        },
        {
          "code":"2",
          "name":"天津"
        },
        {
          "code":"3",
          "name":"河北"
        },
        {
          "code":"4",
          "name":"湖北"
        },
        {
          "code":"5",
          "name":"广东"
        },
        {
          "code":"6",
          "name":"其他"
        }
      ],
      citys:{
        0:[
          "请选择"
        ],
        1:[
          "朝阳区",
          "海淀区",
          "东城区",
          "西城区",
          "房山区",
          "其他"
        ],
        2:[
          "天津"
        ],
        3:[
          "沧州",
          "石家庄",
          "秦皇岛",
          "其他"
        ],
        4:[
          "武汉市",
          "宜昌市",
          "襄樊市",
          "其他"
        ],
        5:[
          "广州市",
          "深圳市",
          "汕头市",
          "佛山市",
          "珠海市",
          "其他"
        ],
        6:[
          "其他"
        ]
      }
      };

2,根据数据动态生成option节点:

function addOptions(target,options){
        var optionEle = null,
            target = target,
            option = options,
            optionLen = options.length;
        for(var i = 0;i < optionLen;i++){
          optionEle = document.createElement('option');
          optionEle.value = option[i].value;
          optionEle.text = option[i].text;
          target.options.add(optionEle);
        }
      }

3,根据上述省市数据,其中code代表“省级”指向“城市”的标识符,当省级的数据变更时,出发change事件:

pro.onchange = function(){
          console.log(this);
          var ct = city[this.value],
              ctLen = ct.length,
              ctBox = [];

          c.innerHTML = "";  
          /*添加城市*/  
          for(var j = 0;j < ctLen;j++){
            ctBox.push({
              "text" : ct[j],
              "value": ct[j]
            });
          }
          addOptions(c,ctBox);
        }

HTML代码:

<div class="content">
      <h3>下拉框联动效果</h3>
      <p>省份:
        <select name="provinces" id="provinces">
          
        </select>
      </p>
      <p>
        市:
        <select name="citys" id="citys">
          
        </select>
      </p>
    </div>

全部JavaScript代码:

var linkDatas = {
      provinces:[
        {
          "code":"0",
          "name":"请选择"
        },
        {
          "code":"1",
          "name":"北京"
        },
        {
          "code":"2",
          "name":"天津"
        },
        {
          "code":"3",
          "name":"河北"
        },
        {
          "code":"4",
          "name":"湖北"
        },
        {
          "code":"5",
          "name":"广东"
        },
        {
          "code":"6",
          "name":"其他"
        }
      ],
      citys:{
        0:[
          "请选择"
        ],
        1:[
          "朝阳区",
          "海淀区",
          "东城区",
          "西城区",
          "房山区",
          "其他"
        ],
        2:[
          "天津"
        ],
        3:[
          "沧州",
          "石家庄",
          "秦皇岛",
          "其他"
        ],
        4:[
          "武汉市",
          "宜昌市",
          "襄樊市",
          "其他"
        ],
        5:[
          "广州市",
          "深圳市",
          "汕头市",
          "佛山市",
          "珠海市",
          "其他"
        ],
        6:[
          "其他"
        ]
      }
      };
      function addOptions(target,options){
        var optionEle = null,
            target = target,
            option = options,
            optionLen = options.length;
        for(var i = 0;i < optionLen;i++){
          optionEle = document.createElement('option');
          optionEle.value = option[i].value;
          optionEle.text = option[i].text;
          target.options.add(optionEle);
        }
      }
      function provincesCitysLink(pro,c){
        var LD         = linkDatas,
            provinces = LD.provinces,
            city       = LD.citys,
            initCity  = city[0],
            proBox    = [];

        /*添加省份*/
        for(var i = 0;i < provinces.length;i++){
          proBox.push({
            "text" : provinces[i].name,
            "value": provinces[i].code
          })
        }    
        addOptions(pro,proBox);

        /*初始化城市*/
        addOptions(c,[{
          "text" : initCity,
          "value": initCity
        }]);

        /*添加联动事件*/
        pro.onchange = function(){
          console.log(this);
          var ct = city[this.value],
              ctLen = ct.length,
              ctBox = [];

          c.innerHTML = "";  
          /*添加城市*/  
          for(var j = 0;j < ctLen;j++){
            ctBox.push({
              "text" : ct[j],
              "value": ct[j]
            });
          }
          addOptions(c,ctBox);
        }
      }
      var provinces = document.getElementById('provinces'),
          citys     = document.getElementById('citys');
      provincesCitysLink(provinces,citys);

以上这篇省市联动效果的简单实现代码(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
使用javascript获取页面名称
Dec 23 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
js实现蒙版效果
Jan 11 Javascript
js获取新浪天气接口的实现代码
Jun 06 #Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 #Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 #Javascript
浅谈String.valueOf()方法的使用
Jun 06 #Javascript
深入理解JavaScript单体内置对象
Jun 06 #Javascript
基于JS实现省市联动效果代码分享
Jun 06 #Javascript
对象转换为原始值的实现方法
Jun 06 #Javascript
You might like
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python设计模式之单例模式实例
2014/04/26 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python grpc超时机制代码示例
2020/09/14 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
理工学院学生自我鉴定
2014/02/23 职场文书
卖房协议书
2014/04/11 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
预备党员转正材料
2014/12/19 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python