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


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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
ES6的新特性概览
Mar 10 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
js实现验证码干扰(动态)
Feb 23 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 编程的 5个良好习惯
2009/02/20 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
python看某个模块的版本方法
2018/10/16 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python Selenium参数配置方法解析
2020/01/19 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python能开发游戏吗
2020/06/11 Python
python logging模块的使用
2020/09/07 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
园林资料员岗位职责
2013/12/30 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
家装业务员岗位职责
2015/04/03 职场文书
python 实现图片特效处理
2022/04/03 Python