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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python数据归一化及三种方法详解
2019/08/06 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Ruby如何实现动态方法调用
2012/11/18 面试题
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
委托培训协议书
2014/11/17 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
利用Apache Common将java对象池化的问题
2022/06/16 Servers
mysql全面解析json/数组
2022/07/07 MySQL