前言
這里分享一個(gè)博主寫的省市區(qū)三級(jí)菜單聯(lián)動(dòng)插件 ― jQuery-Citys,此插件中所有省市區(qū)數(shù)據(jù)均為國家行政區(qū)劃代碼,保證數(shù)據(jù)真實(shí)可靠,插件可以根據(jù)默認(rèn)地區(qū)代碼或地區(qū)名稱進(jìn)行值的初始化操作。
線上演示地址
github地址
演示截圖(查看演示效果請(qǐng)點(diǎn)擊上方鏈接):
插件邏輯
這個(gè)插件的邏輯主要是根據(jù)區(qū)劃代碼來進(jìn)行省市區(qū)的篩選以及分類,因?yàn)閰^(qū)劃代碼的特殊排序博主在里面使用了一些正則來劃分不同的省份以及地區(qū),然后通過對(duì)三級(jí)菜單綁定不同的事件來響應(yīng)省市區(qū)變化的聯(lián)動(dòng)效果。
源碼解析
這里只展示部分相關(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 : '', //省份(省級(jí)),可以為地區(qū)編碼或者名稱 city : '', //城市(地級(jí)),可以為地區(qū)編碼或者名稱 area : '', //地區(qū)(縣區(qū)級(jí)),可以為地區(qū)編碼或者名 selState : 0, //聯(lián)動(dòng)級(jí)別判斷值,二級(jí)聯(lián)動(dòng)狀態(tài)值為0,三級(jí)為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)用插件對(duì)象 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, //省份(省級(jí)),可以為地區(qū)編碼或者名稱 city = _options.city, //城市(地級(jí)),可以為地區(qū)編碼或者名稱 area = _options.area, //地區(qū)(縣區(qū)級(jí)),可以為地區(qū)編碼或者名 selState = _options.selState, //聯(lián)動(dòng)級(jí)別判斷值,二級(jí)聯(lián)動(dòng)狀態(tài)值為0,三級(jí)為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> - 請(qǐng)選擇 - </option>"; cityHtml = "<option> - 請(qǐng)選擇 - </option>"; for(var i in citys){ if(patternPro.test(i)){ //添加一級(jí)列表數(shù)據(jù) proHtml += "<option value=""+(type=="code"?i:citys[i])+"" data-code=""+ i +"">"+ citys[i] +"</option>"; } } //渲染省份一級(jí)列表 $selProvince.html(proHtml); //渲染城市二級(jí)列表 $selCity.html(cityHtml); //默認(rèn)隱藏區(qū)三級(jí)列表 $selArea.hide(); //填寫地區(qū)編碼時(shí),利用編碼定位 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(){ //三級(jí)聯(lián)動(dòng)時(shí),匹配對(duì)應(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); } } } })}
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注