省市区三级菜单联动插件

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

前言

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

线上演示地址: https://yangyunhe369.github.io/jQuery-Citys github地址: https://github.com/yangyunhe369/jQuery-Citys 备用地址 ps:github地址有代码演示,以及插件源码可供参考,线上演示地址可供预览。 演示截图(查看演示效果请点击上方链接):

2e91cfea45f930e94023782ad2adae98_test

插件逻辑

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

源码解析

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

作者: 弦云孤赫 原文链接: http://www.yangyunhe.me/2017/jquery-citys/
本文可以转载,但务必注明原作者和原出处。

相关文章
|
6月前
|
SQL 缓存 JSON
vue利用级联选择器实现全国省市区乡村五级菜单联动
vue利用级联选择器实现全国省市区乡村五级菜单联动
【每日教程】用中继器做一个三级菜单(含标签)
【每日教程】用中继器做一个三级菜单(含标签)
|
11月前
|
BI
宜搭报表页面如何绑定对应字段展示图片
宜搭报表页面如何绑定对应字段展示图片
|
前端开发 JavaScript 数据库
获取省市区列表【项目 商城】
获取省市区列表【项目 商城】
277 0
|
前端开发
【分享】宜搭多选组件,在数据展示页实现换行展示
宜搭多选组件,数据展示页会把原数据拼接展示,如果涉及到多条较长数据时,展示不太直观。
572 1
【分享】宜搭多选组件,在数据展示页实现换行展示
|
小程序 索引
【微信小程序】页面tab栏与页面内容联动
我们可以将整个页面考虑成一个轮播图,tab栏就如同轮播图的那小点点,可以控制网那个页面点击,有了思路就非常的好实现了,这时候就需要阅读官网,了解那个属性可以跟轮播图绑定,从而实现点击滚动,滑动也可以使tab栏随之滚动。
442 1
【微信小程序】页面tab栏与页面内容联动
|
数据可视化 定位技术 atlas
DataV基础版如何制作单独省份地图?
第一步 以“全国业务态势“模版创建可视化 因为DataV基础版不能够自由的添加地图的下各个子组件,制作省份地图需要包含“区域热力”这个子组件。没关系,即便您目前使用的是基础版,您只需选择“全国业务态势”这个模版就可以啦! 第二步 选择地图组件的“区域热力”图层 根据下图,选择到区域热力图子组件后,点击数据选项卡,即可看到映射数据 矢量面数据两个接口。
35303 0
【Axure教程】中继器联动——二级下拉列表案例
【Axure教程】中继器联动——二级下拉列表案例
【Axure教程】中继器联动——二级下拉列表案例
|
前端开发
HTMl+CSS制作二级菜单或二级导航栏
 二级菜单的实现思路为: 1.在默认状态下,使用display:none;将二级菜单隐藏。  2.当一级菜单中的列表标签li获取焦点(hover)后,使用display:blick;将二级菜单显示出来。  3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。
1235 0
HTMl+CSS制作二级菜单或二级导航栏
下一篇
无影云桌面