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


Posted in jQuery onJuly 26, 2019

前言

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

线上演示地址

github地址

演示截图(查看演示效果请点击上方链接):

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

插件逻辑

这个插件的逻辑主要是根据区划代码来进行省市区的筛选以及分类,因为区划代码的特殊排序博主在里面使用了一些正则来划分不同的省份以及地区,然后通过对三级菜单绑定不同的事件来响应省市区变化的联动效果。

源码解析

这里只展示部分相关源码,更多源码可以访问博主的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);
    }
   }
  }
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
jquery插件开发模式实例详解
Jul 20 #jQuery
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
You might like
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
express启用https使用小记
2019/05/21 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
基于python实现学生信息管理系统
2019/11/22 Python
windows下python安装pip方法详解
2020/02/10 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
struct与class的区别
2014/02/03 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
网吧员工管理制度
2015/08/05 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers