jQuery教程 省市区三级菜单联动插件详解
沉沙 2018-09-20 来源 : 阅读 1357 评论 0

摘要:本篇教程介绍了jQuery教程 省市区三级菜单联动插件详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 省市区三级菜单联动插件详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

<

前言
这里分享一个博主写的省市区三级菜单联动插件 — jQuery-Citys,此插件中所有省市区数据均为国家行政区划代码,保证数据真实可靠,插件可以根据默认地区代码或地区名称进行值的初始化操作。
线上演示地址:https://yangyunhe369.github.io/jQuery-Citysgithub地址:https://github.com/yangyunhe369/jQuery-Citys备用地址ps:github地址有代码演示,以及插件源码可供参考,线上演示地址可供预览。演示截图(查看演示效果请点击上方链接):

插件逻辑
这个插件的逻辑主要是根据区划代码来进行省市区的筛选以及分类,因为区划代码的特殊排序博主在里面使用了一些正则来划分不同的省份以及地区,然后通过对三级菜单绑定不同的事件来响应省市区变化的联动效果。
源码解析
这里只展示部分相关源码,更多源码可以访问博主的github地址进行下载查看。
首先是定义各项参数:
var _options = $.extend({
    url : 'js/jquery-citys.json',         //省市区json数据地址
    patternPro : /\d{2}0000/,             //初始化正则匹配省数据
    patternCity : /1101\d{2}/,            //初始化正则匹配市数据
    type : 'code',                        //下拉框值的类型,code行政区划代码,name地名
    code: 0,                              //地区编码
    province : '',                        //省份(省级),可以为地区编码或者名称
    city : '',                            //城市(地级),可以为地区编码或者名称
    area : '',                            //地区(县区级),可以为地区编码或者名
    selState : 0,                         //联动级别判断值,二级联动状态值为0,三级为1
    selProvince : "province",             //省份、直辖市列表框name
    selCity : "city",                     //城市、区列表框name
    selArea : "area",                     //区、县列表框name
}, options);
var proHtml = '',                         //省份html数据
    cityHtml = '',                        //城市html数据
    areaHtml = '',                        //地区html数据
    _this = $(this),                      //指向调用插件对象
    citys = '',                           //省市区json数据
    patternPro = _options.patternPro,     //初始化正则匹配省数据
    patternCity = _options.patternCity,   //初始化正则匹配市数据
    type = _options.type,                 //下拉框值的类型,code行政区划代码,name地名
    code = _options.code,                 //地区编码
    province = _options.province,         //省份(省级),可以为地区编码或者名称
    city = _options.city,                 //城市(地级),可以为地区编码或者名称
    area = _options.area,                 //地区(县区级),可以为地区编码或者名
    selState = _options.selState,         //联动级别判断值,二级联动状态值为0,三级为1
    $selProvince =  _this.find('select[name="'+ _options.selProvince +'"]'),  //省份、直辖市列表框name
    $selCity =  _this.find('select[name="'+ _options.selCity +'"]'),          //城市、区列表框name
    $selArea = _this.find('select[name="'+ _options.selArea +'"]');           //区、县列表框name
获取省市区json数据:
$.getJSON(_options.url,function(data){
  citys = data;
  //执行初始化命令
  init();
})
初始化命令:
var init = function(){
  //初始化默认数据                 
  proHtml = "<option> - 请选择 - </option>";
  cityHtml = "<option> - 请选择 - </option>";                  
  for(var i in citys){
    if(patternPro.test(i)){ //添加一级列表数据
      proHtml += "<option value='"+(type=="code"?i:citys[i])+"' data-code='"+ i +"'>"+ citys[i] +"</option>";
    }
  }
  //渲染省份一级列表
  $selProvince.html(proHtml);
  //渲染城市二级列表
  $selCity.html(cityHtml);
  //默认隐藏区三级列表
  $selArea.hide();
  //填写地区编码时,利用编码定位
  if(type == 'code' && code){
    var c = code - code%1e4;
    province = c;
    c = code - (code%1e4 ? code%1e2 : code);
    city = c;
    c = code%1e2 ? code : 0;
    area = c;
  }
  //添加默认初始值
  $selProvince.find('option').each(function(){
    if(type == 'code' && province != ''){
      if(province == $(this).data('code')){
        $(this).attr('selected',true);
        changeProvince($(this).data('code'));
      }
    }else if(type == 'name' && province != ''){
      if(province == $(this).val()){
        $(this).attr('selected',true);
        changeProvince($(this).data('code'));
      }
    }
  })
  $selCity.find('option').each(function(){
    if(type == 'code' && city != ''){
      if(city == $(this).data('code')){
        $(this).attr('selected',true);
        changeCity($(this).data('code'));
      }
    }else if(type == 'name' && city != ''){
      if(city == $(this).val()){
        $(this).attr('selected',true);
        changeCity($(this).data('code'));
      }
    }
  })
  $selArea.find('option').each(function(){ 
    //三级联动时,匹配对应地区
    if(selState == 1){ 
      if(type == 'code' && area != ''){
        if(area == $(this).data('code')){
          $(this).attr('selected',true);
        }
      }else if(type == 'name' && area != ''){
        if(area == $(this).val()){
          $(this).attr('selected',true);
        }
      }
    }
  })
}
   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程