jQuery-Citys省市区三级菜单联动插件使用详解

前言

这里分享一个博主写的省市区三级菜单联动插件 — jQuery-Citys，此插件中所有省市区数据均为国家行政区划代码，保证数据真实可靠，插件可以根据默认地区代码或地区名称进行值的初始化操作。

线上演示地址

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);
    }
   }
  }
 })
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。