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


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 面向对象编程 万物皆对象
Sep 17 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
javascript 用函数实现继承详解
May 28 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
vue发送ajax请求详解
Oct 09 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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
mysql 性能的检查和优化方法
2009/06/21 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python 多进程队列数据处理详解
2019/12/23 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
Python中的整除和取模实例
2020/06/03 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
J2EE模式面试题
2016/10/11 面试题
大学毕业感言
2014/01/10 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
《雪儿》教学反思
2014/04/17 职场文书
伊索寓言教学反思
2014/05/01 职场文书
演讲比赛策划方案
2014/06/11 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
新员工入职欢迎词
2015/01/23 职场文书
销售会议开幕词
2015/01/28 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
大学学生会竞选稿
2015/11/19 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Python if else条件语句形式详解
2022/03/24 Python