jQuery-Citys省市區(qū)三級菜單聯(lián)動插件使用說明

本篇內(nèi)容介紹了“jQuery-Citys省市區(qū)三級菜單聯(lián)動插件使用說明”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10年積累的網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先做網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有內(nèi)鄉(xiāng)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

前言

這里分享一個博主寫的省市區(qū)三級菜單聯(lián)動插件 — jQuery-Citys，此插件中所有省市區(qū)數(shù)據(jù)均為國家行政區(qū)劃代碼，保證數(shù)據(jù)真實(shí)可靠，插件可以根據(jù)默認(rèn)地區(qū)代碼或地區(qū)名稱進(jìn)行值的初始化操作。

線上演示地址

github地址

演示截圖（查看演示效果請點(diǎn)擊上方鏈接）：

插件邏輯

這個插件的邏輯主要是根據(jù)區(qū)劃代碼來進(jìn)行省市區(qū)的篩選以及分類，因?yàn)閰^(qū)劃代碼的特殊排序博主在里面使用了一些正則來劃分不同的省份以及地區(qū)，然后通過對三級菜單綁定不同的事件來響應(yīng)省市區(qū)變化的聯(lián)動效果。

源碼解析

這里只展示部分相關(guān)源碼，更多源碼可以訪問博主的github地址進(jìn)行下載查看。

首先是定義各項(xiàng)參數(shù)：

var _options = $.extend({
  url : 'js/jquery-citys.json',     //省市區(qū)json數(shù)據(jù)地址
  patternPro : /\d{2}0000/,       //初始化正則匹配省數(shù)據(jù)
  patternCity : /1101\d{2}/,      //初始化正則匹配市數(shù)據(jù)
  type : 'code',            //下拉框值的類型,code行政區(qū)劃代碼,name地名
  code: 0,               //地區(qū)編碼
  province : '',            //省份(省級),可以為地區(qū)編碼或者名稱
  city : '',              //城市(地級),可以為地區(qū)編碼或者名稱
  area : '',              //地區(qū)(縣區(qū)級),可以為地區(qū)編碼或者名
  selState : 0,             //聯(lián)動級別判斷值，二級聯(lián)動狀態(tài)值為0，三級為1
  selProvince : "province",       //省份、直轄市列表框name
  selCity : "city",           //城市、區(qū)列表框name
  selArea : "area",           //區(qū)、縣列表框name
}, options);
var proHtml = '',             //省份html數(shù)據(jù)
  cityHtml = '',            //城市html數(shù)據(jù)
  areaHtml = '',            //地區(qū)html數(shù)據(jù)
  _this = $(this),           //指向調(diào)用插件對象
  citys = '',              //省市區(qū)json數(shù)據(jù)
  patternPro = _options.patternPro,   //初始化正則匹配省數(shù)據(jù)
  patternCity = _options.patternCity,  //初始化正則匹配市數(shù)據(jù)
  type = _options.type,         //下拉框值的類型,code行政區(qū)劃代碼,name地名
  code = _options.code,         //地區(qū)編碼
  province = _options.province,     //省份(省級),可以為地區(qū)編碼或者名稱
  city = _options.city,         //城市(地級),可以為地區(qū)編碼或者名稱
  area = _options.area,         //地區(qū)(縣區(qū)級),可以為地區(qū)編碼或者名
  selState = _options.selState,     //聯(lián)動級別判斷值，二級聯(lián)動狀態(tài)值為0，三級為1
  $selProvince = _this.find('select[name="'+ _options.selProvince +'"]'), //省份、直轄市列表框name
  $selCity = _this.find('select[name="'+ _options.selCity +'"]'),     //城市、區(qū)列表框name
  $selArea = _this.find('select[name="'+ _options.selArea +'"]');      //區(qū)、縣列表框name

獲取省市區(qū)json數(shù)據(jù)：

$.getJSON(_options.url,function(data){
 citys = data;
 //執(zhí)行初始化命令
 init();
})

初始化命令：

var init = function(){
 //初始化默認(rèn)數(shù)據(jù)         
 proHtml = "<option> - 請選擇 - </option>";
 cityHtml = "<option> - 請選擇 - </option>";         
 for(var i in citys){
  if(patternPro.test(i)){ //添加一級列表數(shù)據(jù)
   proHtml += "<option value=""+(type=="code"?i:citys[i])+"" data-code=""+ i +"">"+ citys[i] +"</option>";
  }
 }
 //渲染省份一級列表
 $selProvince.html(proHtml);
 //渲染城市二級列表
 $selCity.html(cityHtml);
 //默認(rèn)隱藏區(qū)三級列表
 $selArea.hide();
 //填寫地區(qū)編碼時，利用編碼定位
 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;
 }
 //添加默認(rèn)初始值
 $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(){ 
  //三級聯(lián)動時，匹配對應(yīng)地區(qū)
  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-Citys省市區(qū)三級菜單聯(lián)動插件使用說明”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享標(biāo)題：jQuery-Citys省市區(qū)三級菜單聯(lián)動插件使用說明
轉(zhuǎn)載注明：http://bm7419.com/article2/gijgic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、商城網(wǎng)站、虛擬主機(jī)、網(wǎng)站設(shè)計公司、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)