前言

這裏分享一個博主寫的省市區三級菜單聯動插件 — jQuery-Citys，此插件中所有省市區數據均為國家行政區劃代碼，保證數據真實可靠，插件可以根據默認地區代碼或地區名稱進行值的初始化操作。

線上演示地址：https://yangyunhe369.github.io/jQuery-Citysgithub地址：https://github.com/yangyunhe369/jQuery-Citys備用地址ps：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);
        }
      }
    }
  })
}
 

作者： 弦雲孤赫 原文鏈接： http://www.yangyunhe.me/2017/jquery-citys/
本文可以轉載，但務必註明原作者和原出處。

省市區三級菜單聯動插件