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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jquery插件实现代码雨特效
Apr 24 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
基于initPHP的框架介绍
2013/04/18 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
angular.js实现购物车功能
2017/10/23 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
python中list循环语句用法实例
2014/11/10 Python
详解Python发送邮件实例
2016/01/10 Python
python实现快递价格查询系统
2020/03/03 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
聘任通知书
2015/09/21 职场文书