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 相关文章推荐
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery实现简单弹幕制作
Dec 10 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实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jQuery中:text选择器用法实例
2015/01/03 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
python实现文本文件合并
2015/12/29 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python pandas时序处理相关功能详解
2019/07/03 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Python设计密码强度校验程序
2020/07/30 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
财务部岗位职责
2013/11/19 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
培训自我鉴定
2014/01/31 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
党员检讨书
2014/10/13 职场文书
交心谈心活动总结
2015/05/11 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书