省市区三级菜单联动插件

Posted 前端小老虎

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市区三级菜单联动插件相关的知识,希望对你有一定的参考价值。

前言

这里分享一个博主写的省市区三级菜单联动插件 — 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);
        }
      }
    }
  })
}

作者: 弦云孤赫 原文链接: http://www.yangyunhe.me/2017/jquery-citys/
本文可以转载,但务必注明原作者和原出处。

以上是关于省市区三级菜单联动插件的主要内容,如果未能解决你的问题,请参考以下文章

省市区县街道四级联动下拉菜单

layui省市区下拉菜单三级联动

中国省市区地址三级联动jQuery插件 案例下载

一张表 怎么 jquery省市区三级联动

关于php+mysql+ajax省市区三级联动菜单,求帮助

c# 求WPF省市区三级联动代码,是从xml中得到省市区数据后添加到三个下拉列表。