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


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 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
使用PHP求两个文件的相对路径
2013/06/20 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
详解jQuery的Cookie插件
2016/11/23 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python绘制3D图形
2018/05/03 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
市场安全管理制度
2014/01/26 职场文书
迎八一活动主题
2014/01/31 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
员工年终考核评语
2014/12/31 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
毕业设计工作总结
2015/08/14 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Python Django模型详解
2021/10/05 Python