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


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小测验(代码集合)
Jul 27 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
jQuery构造函数init参数分析
May 13 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
js数组去重的方法总结
Jan 18 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-Java-Bridge使用笔记
2014/09/22 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
React-router v4 路由配置方法小结
2017/08/08 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python实现微信自动回复功能
2018/04/11 Python
深入理解Python异常处理的哲学
2019/02/01 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
硕士学位论文评语
2014/12/31 职场文书
离婚起诉书范本
2015/05/18 职场文书
贷款工资证明范本
2015/06/12 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
Golang 结构体数据集合
2022/04/22 Golang