jQuery-Citys省市区三级菜单联动插件使用详解
前言
这里分享一个博主写的省市区三级菜单联动插件 — jQuery-Citys,此插件中所有省市区数据均为国家行政区划代码,保证数据真实可靠,插件可以根据默认地区代码或地区名称进行值的初始化操作。
线上演示地址
github地址
演示截图(查看演示效果请点击上方链接):
插件逻辑
这个插件的逻辑主要是根据区划代码来进行省市区的筛选以及分类,因为区划代码的特殊排序博主在里面使用了一些正则来划分不同的省份以及地区,然后通过对三级菜单绑定不同的事件来响应省市区变化的联动效果。
源码解析
这里只展示部分相关源码,更多源码可以访问博主的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.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
这篇文章主要介绍了jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析的相关资料,需要的朋友可以参考下2016-10-10jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码,需要的朋友可以参考下。2011-07-07jquery使用remove()方法删除指定class子元素
这篇文章主要介绍了jquery使用remove()方法删除指定class子元素的方法,可实现删除指定元素下指定class的子元素功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03jQuery绑定点击事件与改变事件的方式总结及多个元素绑定多个事件
我们一说到jQuery中对于元素的修改,就是元素的内容、属性、样式的修改,下面这篇文章主要给大家介绍了关于jQuery绑定点击事件与改变事件的方式总结及多个元素绑定多个事件的相关资料,需要的朋友可以参考下2022-12-12jQuery源码分析-04 选择器-Sizzle-工作原理分析
在分析Sizzle源码之前,先整理一下选择器的工作原理,先明确一些选择器中用到的名词,后边阅读时不会有歧义2011-11-11Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
接了个项目做,需要是这样的:输入手机号,实时判断输入的手机号是否符合规则,如果不符合怎么处理,符合又怎么处理等一系列问题,本篇文章给大家介绍Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态,感兴趣的朋友参考下2015-11-11EasyUI修改DateBox和DateTimeBox的默认日期格式示例
本篇文章主要介绍了EasyUI修改DateBox和DateTimeBox的默认日期格式示例,具有一定的参考价值,有兴趣的可以了解一下。2017-01-01
最新评论