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


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 匿名函数及其代码模式原理
Mar 19 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
Js代码中的span拼接问题解决
Nov 22 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定时执行任务的3种方法详解
2015/12/21 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
Vue内容分发slot(全面解析)
2017/08/19 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
SQL注入攻击的种类有哪些
2013/12/30 面试题
三爱活动实施方案
2014/03/19 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
初中学习计划书范文
2014/09/15 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
接收函格式
2015/01/30 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2015年科普工作总结
2015/07/23 职场文书
个人合作协议范本
2015/08/06 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL