jQuery-city省市三级菜单联动插件详解

前言

在这里，我们分享一个由博客作者jQuery-city编写的插件。本插件中所有省市数据均为国家行政区划代码，以保证数据的真实性和可靠性。该插件可以根据默认区域代码或区域名称初始化这些值。

在线演示地址

Github地址

演示截图(请点击上方链接查看演示效果):

插件逻辑

这个插件的逻辑主要是根据分区代码对省市进行过滤和分类，因为博主利用一些规律性来划分不同的省市区域，然后通过将不同的事件绑定到三级菜单来响应省市变化的联动效应。

源代码解析

这里只展示了一些相关的源代码，更多的源代码可以通过访问博主的github地址下载查看。

首先是定义参数：

Var _ options=$。extend({ URL : ' js/jquery-city s . JSON '，//json数据地址patternpro3360/\ d {2} 0000/，//初始化常规匹配的省数据模式3360/1101 \ d {2}/，//初始化常规匹配的城市数据类型： 'code '，//下拉框值类型，代码行政区划代码，名称地名代码33600，//区号province3360 ' '，//省(省级//省市列表框名称selCity : 'city '，//市县列表框名称selArea : 'area '，//区县列表框名称}，选项)；Var proHtml=' '，//省Html数据cityHtml=' '，//市Html数据areaHtml=' '，//地区html数据_this=$(this)，//指向调用插件对象citys=' '，//json数据patternpro=_ options.patternpro，//初始化常规匹配省数据pattern ncity=_ options . pattern ncity，//初始化常规匹配市数据类型=_options.type，//类型下拉框值，Code行政区划代码，名称地名代码=_options.code，//地区可以是地区代码或名称城市=_options.city，//城市(地级)，可以是区号或名称区域=_options.area，//地区(县级)，区号或名称selState=_options.selState，//联动级别判断值，二级联动状态值为0。 第三级是1 $省份=_ this。查找('选择[name='' _ options。塞尔省' ']')。//省和市列表框名称$ sel city=_ this . find(' select[name=' ' _ options . sel city ' ']')，//市和区列表框名称$ sel area=_ this . find(' select[name=' ' _ options . sel area ' '])。//区县列表框名称获取省市json数据：

$.getJSON(_options.url，function(data){ city s=data；//执行初始化命令init()；})初始化命令：

var init=function(){ //初始化默认数据' proHtml='选项-请选择-/option '；cityHtml='选项-请选择-/option '；for(var I in city){ if(pattern pro。测试(I)){//添加一级列表数据' proHtml='选项值=' '(类型=='代码？i:citys[i])数据-代码=' I ' ' '城市s[I]'/选项";} } //渲染省份一级列表$ SelVenture。html(ProHTMl)；//渲染城市二级列表$ SelCiTY。html(城市HTMl)；//默认隐藏区三级列表$ selarea。hide()；//填写地区编码时，利用编码定位if(type==' code ' code){ var c=code-code4；省=c；c=代码- (code4？code2 :代码);城市=c；c=code2？代码： 0;面积=c；} //添加默认初始值$ SelVenture。查找('选项').每个（函数(){ if(type=='code '省份！=''){ if(省份==$(这个)。数据('代码){ $(这个).attr('selected '，true)；更改省($(这个).数据('代码');} }else if(type=='name '省份！=''){ if(省份==$(这个)。val()){ $(this).attr('selected '，true)；更改省($(这个).数据('代码');} } }) $selCity.find('option ').每个（函数(){ if(type=='code' city！=''){ if(city==$(this).数据('代码){ $(这个).attr('selected '，true)；changeCity($(this).数据('代码');} }else if(type=='name' city！=''){ if(city==$(this).val()){ $(this).attr('selected '，true)；changeCity($(this).数据('代码');} } }) $selArea.find('option ').每个（函数(){ //三级联动时，匹配对应地区if(SelState==1){ if(type==' code ' area！=''){ if(area==$(this).数据('代码){ $(这个).attr('selected '，true)；} }else if(type=='name' area！=''){ if(area==$(this).val()){ $(this).attr('selected '，true)；} } } })}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。