jQuery-Citys省市区三级菜单联动插件使用详解

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

$.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);    }   }  } })}