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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Django开发中复选框用法示例
2018/03/20 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
如何在django中添加日志功能
2020/02/06 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
2014年庆元旦活动方案
2014/02/15 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
终止劳动合同通知书
2015/04/16 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
聘任合同书
2015/09/21 职场文书