jquery插件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)功能效果
點(diǎn)擊上方?java項(xiàng)目開發(fā)，選擇?設(shè)為星標(biāo)
優(yōu)質(zhì)文章，及時(shí)送達(dá)
案例功能效果圖
前端頁面效果圖
環(huán)境介紹
前端：vue+h5
完整源碼獲取方式
源碼獲取方式
掃碼關(guān)注回復(fù)【ssx】獲取完整源碼
如果你在運(yùn)行這個(gè)代碼的過程中有遇到問題，請(qǐng)加小編微信xxf960513，我拉你進(jìn)對(duì)應(yīng)微信學(xué)習(xí)群??！幫助你快速掌握這個(gè)功能代碼！
核心代碼介紹
city-select.css
blockquote {quotes: none}q:before, q:after, blockquote:before, blockquote:after {content: "";content: none}a img {border: none}aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block}.city-select .city-cont dl, .city-select .city-txt {: 1}:after, .city-select .city-cont dl:after, .city-select .city-txt:after {content: " ";display: table;height: 0;clear: both}{: 0;position: relative;display: inline-block}.city-cont dl, .city-select .city-txt {: 1}.city-cont dl:after, .city-select .city-txt:after {content: " ";display: table;height: 0;clear: both}.city-info {: none}.city-info:after {: none;: 6px solid #ccc}.city-pavilion + .city-info .not-search {display: none}.city-pavilion + .city-info .not-search[class~="not-val"] {display: block}.city-pavilion.hide + .city-info .city-input {display: none}.city-pavilion.hide + .city-info .city-input[class~="not-val"] {display: block}.city-pavilion + .multi-type .city-input {display: block}.city-pavilion.hide + .multi-type .city-input[class~="not-val"] {display: block}.city-pavilion.hide + .multi-type .search-show {display: block}.city-info {: #eef1f6;cursor: not-allowed}.city-info span {: #eef1f6}.city-info span:hover i {display: none}.city-info span + .city-input {display: none}.city-info input {cursor: not-allowed}.city-info {cursor: default}.city-info span:hover i {display: none}.city-info span + .city-input {display: none}.city-info input {cursor: default}.city-info {border: 1px solid #ccc;: #fcfcfc;cursor: pointer;width: 280px;overflow: hidden;padding: 8px;: 0;position: relative;: 2}.city-info:after {content: '';: 6px solid transparent;: 6px solid transparent;: 6px solid #ccc;: 2px;display: block;width: 0;height: 0;position: absolute;top: 17px;right: 5px;: border .2s;: border .2s;: border .2s;transition: border .2s}.city-info.multi-type span {background: none;padding: 5px 0;: 0}.city-info.multi-type .span-over {width: 99%;overflow: hidden;: ellipsis;: nowrap}.city-info.multi-type .city-input {display: block;width: 100%}.city-info.multi-type .city-input.hide {display: none}.city-info span {: #f5f5f5;: 2px;color: #666;cursor: default;: 14px;display: inline-block;: middle;padding: 5px;: 5px;position: relative}.city-info span + .city-input {width: auto}.city-info span i {color: #fff;cursor: pointer;background: #ffbfbf;: 100%;display: block;width: 14px;height: 14px;: 14px;: center;: 0;position: absolute;top: -5px;right: -5px;: 1;visibility: hidden;opacity: 0;: all 1s;: all 1s;: all 1s;transition: all 1s}.city-info span i:after {content: '\D7';: 12px}.city-info span:hover i {visibility: visible;opacity: 1}.city-info .city-input, .city-select .city-info span {display: inline-block;: middle;: 8px}.city-input {width: 100%;position: relative;overflow: hidden}.city-input.hide {display: none}.city-input em {color: #999;display: block;: normal;: 12px;height: 24px;: 24px}input[type="text"] {background: transparent;border: none;: border-box;color: #333;: 12px;width: 100%;height: 24px;: 24px \9;padding: 0 5px;outline: none}.city-pavilion, .city-select .city-list {border: 1px solid #ccc;background: #fff;position: absolute;top: 100%;: 999;left: 0;: -1px;: 400ms;transform: translateY(0);opacity: 1;visibility: visible}.city-pavilion.hide, .city-select .city-list.hide {transform: translateY(-2%);opacity: 0;visibility: hidden}.city-pavilion {: 0 2px 5px #ddd;width: 467px}.city-tabs {: 1px solid #ccc;background: #fbfbfb;: 0}.city-tabs a {: 1px solid transparent;display: inline-block;: 14px;color: #666;padding: 0 6px;height: 36px;: 36px;: center;position: relative;bottom: -1px;: all 1s;: all 1s;: all 1s;transition: all 1s}.city-tabs a:hover {: #000}.city-tabs a.active {: #02aec7;color: #02aec7;cursor: default}.city-tabs a.forbid {color: #bbb;cursor: not-allowed}.city-tabs a.forbid:hover {: transparent}.city-cont {: 20px;: 20px;: 0;position: relative;: 200px;: hidden;: auto}.city-cont dl:first-child dd {: 0}.city-cont dt, .city-select .city-cont dd {display: inline-block;: top;float: left}.city-cont dt {color: #02aec7;: 16px;width: 28px}.city-cont dd {: 14px;width: 421px;: -10px;: -10px;: 20px}.city-cont dd a {color: #666;display: inline-block;padding: 5px 7px;: 5px;: 5px;: all .5s;: all .5s;: all .5s;transition: all .5s}.city-cont dd a:hover {background: #f5f5f5;: 2px}.city-cont dd a.active {background: #02aec7;: 2px;color: #fff;: 0 0 5px #ddd}.city-cont dl {: 400ms;opacity: 1;transform: translateX(0)}.city-cont dl.hide {display: none;opacity: 0;transform: translateX(5%)}.city-list {: 0;width: 298px;: 170px;: hidden;: auto;: border-box}.city-list li {: 1px solid #ccc;: 1px solid #ccc;cursor: pointer;padding: 10px 5px;position: relative;: -1px}.city-list li:first-child {: none}.city-list li:hover {: #f9f9f9}.city-list li.active {: 2px solid #02aec7;: #f0fbfd}.city-list li.hover {: #02aec7;: #f9f9f9;: 2}.city-list li.hover span {: 10px}.city-list li.not-have {: #fff;color: #999;: 14px;cursor: not-allowed;: 1.5;padding: 5px}.city-list li.not-have strong {color: #02aec7;: normal;padding: 0 5px}.city-list span {display: inline-block;: 14px;width: 50%;overflow: hidden;: ellipsis;: nowrap;: all .5s;: all .5s;: all .5s;transition: all .5s}.city-list span.spell {: right;: 12px;color: #02aec7}.city-txt {color: #999;: 12px;: 10px;: text-bottom;: 10px;: 20px}.city-txt a, .city-select .city-txt span {display: block;float: right;: 10px;: top}.city-txt em {: normal}.city-txt a {color: #dc8383;: -3px}.city-txt a:hover {color: #02aec7}.city-txt a i {background: url(http://images.vrm.cn/2017/07/26/del.png) no-repeat;width: 16px;height: 16px;display: inline-block;: middle}.city-txt span {: 2px}.city-txt i {color: #02aec7}.city-tips {background: rgba(0, 0, 0, 0.7);: 2px;color: #fff;: 14px;: center;padding: 0 10px;position: absolute;top: 5px;left: 50%;: 36px;: -50px;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B200000, endColorstr=#B200000);: 400ms;transform: translateY(0);opacity: 1;visibility: visible;: 5}.city-tips.hide {transform: translateY(5%);opacity: 0;visibility: hidden}
Cityselect.js
(function ($, window) {var functionality = {};/*** 構(gòu)造器*/function Cityselect(options, selector) {this.options = $.extend({}, Cityselect.defaults, options);this.$selector = $(selector);this.multiSelectResult = [];this.multiSelectResultId = [];this.provinceId = [];this.whole = [];this.values = [];this.selectIndex = 0;this.isfocus = true;this.init();}/*** 默認(rèn)參數(shù)*/Cityselect.defaults = {dataJson: null,convert: true,whole: false,shorthand: false,search: true,multiSelect: false,multiMaximum: 5,multiType: 0,mosaic: ',',placeholder: '請(qǐng)選擇城市',searchPlaceholder: '輸入關(guān)鍵詞搜索',hotCity: [],onInit: function () {},onForbid: function () {},onTabsAfter: function (target) {},onTabsForbid: function (target) {},onCallerAfter: function (target, values) {}};/*** 內(nèi)部函數(shù)*/functionality.recombine = function (data) {var resultId = [],result = [],province = [];// 篩選出省份的ID$.each(data, function (key, value) {if (value.parentId === '100000') {resultId.push(value.id);province.push(value);}});// 根據(jù)省份ID，查找出所有的城市for (var i = 0; i < resultId.length; i++) {$.each(data, function (key, value) {if (resultId[i] === value.parentId) {result.push(value);}});}// 存儲(chǔ)省份this.province = province;// 篩選出除了省份外的數(shù)據(jù)functionality.whole.call(this);return result;}functionality.whole = function () {var self = this,result = [];$.each(self.options.dataJson, function (key, value) {if (value.id !== '100000' && value.parentId !== '100000') {result.push(value);}});self.whole = result;}functionality.filter = function (parameter) {var configure = parameter;// 包含市縣級(jí)數(shù)據(jù)，否則市級(jí)數(shù)據(jù)configure.contain = configure.options.whole ? configure.whole : configure.newCityData;//分類的城市parameter.filterCity = {HOT: [],A: [],B: [],C: [],D: [],E: [],F: [],G: [],H: [],I: [],J: [],K: [],L: [],M: [],N: [],O: [],P: [],Q: [],R: [],S: [],T: [],U: [],V: [],W: [],X: [],Y: [],Z: []};$.each(configure.contain, function (key, value) {//匹配城市數(shù)據(jù)switch (value.letter) {case ('A'):parameter.filterCity.A.push(value);break;case ('B'):parameter.filterCity.B.push(value);break;case ('C'):parameter.filterCity.C.push(value);break;case ('D'):parameter.filterCity.D.push(value);break;case ('E'):parameter.filterCity.E.push(value);break;case ('F'):parameter.filterCity.F.push(value);break;case ('G'):parameter.filterCity.G.push(value);break;case ('H'):parameter.filterCity.H.push(value);break;case ('I'):parameter.filterCity.I.push(value);break;case ('J'):parameter.filterCity.J.push(value);break;case ('K'):parameter.filterCity.K.push(value);break;case ('L'):parameter.filterCity.L.push(value);break;case ('M'):parameter.filterCity.M.push(value);break;case ('N'):parameter.filterCity.N.push(value);break;case ('O'):parameter.filterCity.O.push(value);break;case ('P'):parameter.filterCity.P.push(value);break;case ('Q'):parameter.filterCity.Q.push(value);break;case ('R'):parameter.filterCity.R.push(value);break;case ('S'):parameter.filterCity.S.push(value);break;case ('T'):parameter.filterCity.T.push(value);break;case ('U'):parameter.filterCity.U.push(value);break;case ('V'):parameter.filterCity.V.push(value);break;case ('W'):parameter.filterCity.W.push(value);break;case ('X'):parameter.filterCity.X.push(value);break;case ('Y'):parameter.filterCity.Y.push(value);break;case ('Z'):parameter.filterCity.Z.push(value);break;default:}//如果有設(shè)置熱門城市，就輸出設(shè)置的，反正就去取默認(rèn)城市前面18條做熱門城市if (parameter.options.hotCity.length < 1 && key < 18) {parameter.filterCity.HOT.push(value);} else {$.each(parameter.options.hotCity, function (hkey, hvaluef) {if (hvaluef === value.name) {parameter.filterCity.HOT.push(value);}});}});return parameter.filterCity;}functionality.montage = function (citydata, letter) {var self = this,data = citydata === 0 ? self.filterCity : citydata,html = '',name;$.each(data, function (key, value) {name = self.options.shorthand ? value.shortName : value.name; //顯示的是簡稱還是全稱if (citydata < 1) {if (letter === key) {$.each(value, function (lkey, lvalue) {name = self.options.shorthand ? lvalue.shortName : lvalue.name; //顯示的是簡稱還是全稱html += ''" data-id="' + lvalue.id + '" data-title="' + name + '" data-letter="' + lvalue.letter + '">' + name + '';});}} else {html += ''" data-id="' + value.id + '" data-title="' + name + '" data-letter="' + value.letter + '">' +'' + name + '' +'' + value.pinyin + '' +'';}});return html;}functionality.template = ['','',','{name}','',','','''',''];functionality.split = function (str) {var letArray = [];for ( var i = 0; i < str.length; i++ ) {letArray.push(str[i]);}return letArray;}functionality.groupArray = ['HOT','AB','CD','EFG','HI','JK','LM','NOP','QR','S','TU','VWX','Y','Z'];functionality.showDrop = function (event) {var self = this,configure = self.options,$target = $(event.target);//禁止點(diǎn)擊后的回調(diào)if ($(event.currentTarget).hasClass('forbid')) {configure.onForbid.call(self);return false;}//點(diǎn)擊刪除if ($target.hasClass('del')) {functionality.deletes.call(self, $target);return false;}self.isfocus = true;self.$selector.addClass('down').find('.city-pavilion').removeClass('hide').siblings('.city-list').addClass('hide');$(event.currentTarget).find('.input-search').focus();//有值就加選中狀態(tài)functionality.defSelected.call(self);}functionality.tabs = function (event) {var $target = $(event.target),configure = this.options,letter = $target.data('letter');//tabs禁止點(diǎn)擊后的回調(diào)if ($target.hasClass('forbid')) {configure.onTabsForbid.call(self, $target);return false;}//添加選中狀態(tài)$target.addClass('active').siblings().removeClass('active');//顯示對(duì)應(yīng)索引的城市列表this.$selector.find('dl').addClass('hide').siblings('.city-'+ letter).removeClass('hide');//切換列表回調(diào)configure.onTabsAfter.call(this, $target);}functionality.singleAchieve = function (event) {var $target = $(event.currentTarget),$input = this.$selector.find('.input-search'),$cityInfo = this.$selector.find('.city-info'),configure = this.options,parentId = $target.attr('data-parentid'),id = $target.attr('data-id'),name = $target.data('title');//存儲(chǔ)選中的值this.values = [];this.values.push({ 'name': name, 'id': id, 'parentId': parentId });//添加選中狀態(tài)this.$selector.find('.caller').removeClass('active');this.$selector.find('.caller[data-id="'+ id +'"]').addClass('active');//賦值選中的給文本框$cityInfo.find('span').remove();this.$selector.find('.city-input').before(''" data-parentid="'+ parentId +'">'+ name +'').find('.input-search').val('');//調(diào)整文本框位置functionality.singleResize.call(this);//隱藏彈窗this.$selector.removeClass('down').find('.city-pavilion, .city-list').addClass('hide');//沒有開啟搜索且數(shù)組是不為空if (!this.options.search && this.values.length > 0) {this.$selector.find('.city-input').addClass('hide');}//選擇之后的回調(diào)configure.onCallerAfter.call(this, $target, this.values[0]);}functionality.multiAchieve = function (event) {var self = this,$selector = self.$selector,$target = $(event.currentTarget),$input = $selector.find('.input-search'),configure = self.options,parentId = $target.attr('data-parentid'),id = $target.attr('data-id'),name = $target.data('title'),inputVal = $input.val(),hasActive = $target.hasClass('active'),joinSpan, mosaicName;if (!hasActive) {//選中的是否大于限制的if (self.selectIndex >= configure.multiMaximum) {$selector.find('.city-tips').removeClass('hide');setTimeout(function() {$selector.find('.city-tips').addClass('hide');}, 1000);return false;}//選擇的城市if ($.inArray(name, self.multiSelectResult) < 0) {self.multiSelectResult.push(name);self.multiSelectResultId.push(id);self.provinceId.push(parentId);//拼接生成選中值joinSpan = ''" data-parentid="'+ parentId +'">'+ name +'';//添加選中狀態(tài)$selector.find('.caller[data-id="'+ id +'"]').addClass('active');//添加選中的城市顯示方式if (configure.multiType < 1) {$selector.find('.city-input').before(joinSpan);}//選中數(shù)self.selectIndex += 1;}} else {//刪除去掉選中城市self.multiSelectResult.splice($.inArray(name, self.multiSelectResult), 1);self.multiSelectResultId.splice($.inArray(id, self.multiSelectResultId), 1);self.provinceId.splice($.inArray(parentId, self.provinceId), 1);//去掉選中狀態(tài)$selector.find('.caller[data-id="'+ id +'"]').removeClass('active');//刪除選中的城市$selector.find('.city-info').find('span[data-id="'+ id +'"]').remove();//選中數(shù)self.selectIndex -= 1;}//存儲(chǔ)選中的值self.values = [];self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';//拼接后的選中namemosaicName = self.multiSelectResult.join(configure.mosaic);//添加選中的城市顯示方式if (configure.multiType === 1) {$selector.find('.city-name').html(''">'+ mosaicName +'');}//有選中就清除，沒有值就添加if (self.selectIndex < 1) {$selector.find('.city-input').addClass('not-val');$selector.find('.span-over').remove();} else {$selector.find('.city-input').removeClass('not-val');}//添加選中數(shù)$selector.find('.city-count').find('i').text(self.selectIndex);//選擇之后的回調(diào)configure.onCallerAfter.call(self, $target, self.values[0]);}functionality.search = function (event) {var self = this,$target = $(event.target),configure = this.options,keyCode = event.keyCode,inputVal = $target.val(),result = [],resultHtml;//如果是按下shift/ctr/左右/command鍵不做事情if (keyCode === 16 || keyCode === 17 || keyCode === 18 || keyCode === 37 || keyCode === 39 || keyCode === 91 || keyCode === 93) {return false;}//如果不是按下enter/上下鍵的就做搜索事情if (keyCode !== 13 && keyCode !== 38 && keyCode !== 40) {self.isfocus = false;$.each(self.contain, function(key, value) {//拼音或者名稱搜索if(value.pinyin.toLocaleLowerCase().search(inputVal.toLocaleLowerCase()) > -1 || value.name.search(inputVal) > -1 || value.id.search(inputVal) > -1 ){result.push(value);}});resultHtml = result.length > 0 ? functionality.montage.call(self, result) : '沒有找到' + inputVal +'相關(guān)城市';self.$selector.find('.city-list').html(resultHtml);//有值就加選中狀態(tài)functionality.defSelected.call(self);//彈窗隱藏，搜索列表顯示functionality.searchShow.call(self);}return false;}functionality.searchShow = function (event) {this.$selector.addClass('down').find('.city-pavilion').addClass('hide');this.$selector.find('.city-input').addClass('search-show');this.$selector.find('.city-list').removeClass('hide');}functionality.defSelected = function (event) {var self = this;//有選中的，就添加選中狀態(tài)if (self.values.length > 0) {if (self.values[0].id instanceof Array) {$.each(self.values[0].id, function (key, value) {self.$selector.find('.caller[data-id="'+ value +'"]').addClass('active');});} else {self.$selector.find('.caller[data-id="'+ self.values[0].id +'"]').addClass('active');}}}functionality.operation = function (event) {var self = this,$selector = self.$selector,$cityList = $selector.find('.city-list'),$target = $(event.target),$items = $cityList.find('.caller'),hasNothave = $cityList.find('li').hasClass('not-have'),keyCode = event.keyCode,index = 0,direction,itemIndex;//按下enter鍵，執(zhí)行選中事件if (keyCode === 13) {$cityList.find('.caller.hover').trigger('click');return false;}//按下上下鍵if (keyCode === 38 || keyCode === 40) {//方向direction = keyCode === 38 ? -1 : 1;//選中的索引itemIndex = $items.index($cityList.find('.caller.hover'));if (itemIndex < 0) {index = direction > 0 ? -1 : 0;} else {index = itemIndex;}//鍵盤去選擇的索引index = index + direction;//循環(huán)選擇index = index === $items.length ? 0 : index;//添加選中狀態(tài)$items.removeClass('hover').eq(index).addClass('hover');if (!hasNothave) {//滾動(dòng)條跟隨定位functionality.scroll.call(self);}return false;}}functionality.scroll = function (event) {var self = this,$cityList = self.$selector.find('.city-list'),$callerHover = $cityList.find('.caller.hover'),oh = $cityList.outerHeight(),ch = $callerHover.outerHeight() + 1,dy = $callerHover.position().top,sy = $cityList.scrollTop();$cityList.animate({scrollTop: dy + ch - oh + sy}, 200);}functionality.singleResize = function () {var self = this,$selector = self.$selector,$cityInfo = $selector.find('.city-info'),_iw = $cityInfo.outerWidth(),_p = $cityInfo.innerWidth() - $cityInfo.width(),_sw = $cityInfo.find('span').outerWidth(true);$selector.find('.city-input').width(_iw - _sw - _p - 2);}functionality.multiResize = function () {var self = this,$selector = self.$selector,_h = $selector.outerHeight(true) - 1;$selector.find('.city-pavilion, .city-list').animate({'top': _h}, 10);}functionality.forbid = function () {var self = this;$.each(self.$selector.find('.city-cont').find('dl'), function (key, value) {var _this = $(value),_letter = _this.data('letter');if (!$(value).text()) {self.$selector.find('.tab-a[data-letter="'+ _letter +'"]').addClass('forbid');}});}functionality.deletes = function (target) {var self = this,$target = target,$parent = $target.parent(),name = $parent[0].innerText,id = $parent.attr('data-id'),parentId = $parent.data('parentid');//刪除去掉選中城市self.multiSelectResult.splice($.inArray(name, self.multiSelectResult), 1);self.multiSelectResultId.splice($.inArray(id, self.multiSelectResultId), 1);self.provinceId.splice($.inArray(parentId, self.provinceId), 1);//存儲(chǔ)剩下城市的值self.values = [];self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';//刪除$parent.remove();self.$selector.find('.caller[data-id="'+ id +'"]').removeClass('active');//如果是多選才執(zhí)行以下事情if (self.options.multiSelect) {self.selectIndex -= 1;self.$selector.find('.city-count').find('i').text(self.selectIndex);//數(shù)組是空self.values.length < 1 ? self.$selector.find('.city-input').addClass('not-val') : '';} else {//調(diào)整文本框位置functionality.singleResize.call(self);}}/*** 原型方法*/Cityselect.prototype.init = function () {var self = this,configure = this.options;//開啟轉(zhuǎn)換就用新的json，否則就用正常格式self.newCityData = configure.convert ? functionality.recombine.call(self, configure.dataJson) : configure.dataJson;//城市分類生成jsonfunctionality.filter(self);//主結(jié)構(gòu)生成輸出self.createSubject();//綁定事件self.bindEvent();//初始化回調(diào)configure.onInit.call(self);};Cityselect.prototype.groupCity = function () {var self = this,domtel = '',letterStr,groupArray,list,montage,hide;for ( var i = 0; i < functionality.groupArray.length; i++ ) {//字母數(shù)組groupArray = functionality.groupArray[i];//不是熱點(diǎn)城市的字母就不做拆分處理letterStr = groupArray !== 'HOT' ? functionality.split(groupArray) : '';//添加隱藏classhide = i > 0 ? ' hide' : '';//創(chuàng)建對(duì)應(yīng)的dldomtel += '+ groupArray +'">{dl}';if (letterStr && letterStr.length > 1) {list = '';for (var j = 0; j < letterStr.length; j++) {montage = functionality.montage.call(self, 0, letterStr[j]);//不為空就執(zhí)行下面創(chuàng)建節(jié)點(diǎn)if (montage) {list += '' + letterStr[j] +''+'' + montage +'';}}} else {montage = functionality.montage.call(self, 0, groupArray);//不為空就執(zhí)行下面創(chuàng)建節(jié)點(diǎn)if (montage) {list = groupArray !== 'HOT' ?'' + groupArray +''+'' + functionality.montage.call(self, 0, groupArray) +'' :'' + functionality.montage.call(self, 0, groupArray) +'';}}domtel = domtel.replace('{dl}', list);}return domtel;};Cityselect.prototype.createSubject = function () {var self = this,configure = self.options,template = functionality.template.join('');//添加搜索默認(rèn)文本提示template = template.replace('{placeholder}', configure.searchPlaceholder);//添加多選提示最大選擇數(shù)template = template.replace('{maxnum}', configure.multiMaximum);template = template.replace('{tipnum}', configure.multiMaximum);//添加多選選中的值顯示的方式template = template.replace('{type}', configure.multiType === 1 ? ' multi-type' : '');//添加多選選中的值顯示的方式template = template.replace('{name}', configure.multiType === 1 ? '' : '');//添加多選classconfigure.multiSelect ? self.$selector.addClass('multi') : '';template = template.replace('{not}', 'not-val not-search');//把城市彈窗dom添加到容器中self.$selector.html(template.replace('{cont}', self.groupCity()));//單選就去掉!configure.multiSelect ? self.$selector.find('.city-count').html(''): '';//沒有開啟搜索，就remove掉搜索domif (!configure.search) {self.$selector.find('.city-input').addClass('not-search').html(''+ configure.placeholder +'');self.$selector.find('.city-txt').find('em').remove();} else {self.$selector.find('.city-input').removeClass('not-search');}//沒有數(shù)據(jù)輸出的就添加禁止點(diǎn)擊functionality.forbid.call(self);}Cityselect.prototype.bindEvent = function (event) {var self = this,configure = self.options,$selector = self.$selector;//顯示城市-彈窗$selector.on('click.cityselect', '.city-info', $.proxy(functionality.showDrop, self));//tabs-切換索引的城市顯示$selector.on('click.cityselect', '.tab-a', $.proxy(functionality.tabs, self));//點(diǎn)擊選擇城市$selector.on('click.cityselect', '.caller', $.proxy(configure.multiSelect ? functionality.multiAchieve : functionality.singleAchieve, self));//點(diǎn)擊清空$selector.on('click.cityselect', '.empty', $.proxy(self.clear, self));//搜索$selector.on('keyup.cityselect', '.input-search', $.proxy(functionality.search, self));//鍵盤切換列表$selector.on('keydown.cityselect', $.proxy(functionality.operation, self));}Cityselect.prototype.unBindEvent = function (event) {var self = this,$selector = self.$selector;$selector.off('click.cityselect', '.city-info');$selector.off('click.cityselect', '.tab-a');$selector.off('click.cityselect', '.caller');$selector.off('click.cityselect', '.empty');$selector.off('keyup.cityselect', '.input-search');$selector.off('keydown.cityselect');}Cityselect.prototype.setCityVal = function (val) {var self = this,configure = self.options,setCity = val.replace(/\s/g, ''),cityArray = setCity.split(','),name, joinSpan, mosaicName;if (val) {//存儲(chǔ)設(shè)置城市變量self.cityVal = val;//根據(jù)多選還是單選，多選不能超過設(shè)定的個(gè)數(shù)輸出; 單選只能輸出一個(gè)，設(shè)置多個(gè)只會(huì)輸出第一個(gè)!configure.multiSelect ? cityArray = cityArray.splice(0, 1) : cityArray = cityArray.splice(0, configure.multiMaximum);for (var i = 0; i < cityArray.length; i++) {$.each(self.newCityData, function (key, value) {name = self.options.shorthand ? value.shortName : value.name; //顯示的是簡稱還是全稱if (cityArray[i] === value.name) {self.multiSelectResult.push(name);self.multiSelectResultId.push(value.id);self.provinceId.push(value.parentId);//添加選中狀態(tài)self.$selector.find('.caller[data-id="'+ value.id +'"]').addClass('active');//選中的值拼接domjoinSpan = ''" data-parentid="'+ value.parentId +'">'+ name +'';//添加選中的城市顯示方式if (configure.multiType < 1) {self.$selector.find('.city-input').before(joinSpan);}}});//如果是多選才執(zhí)行以下事情if (self.options.multiSelect) {self.selectIndex = i + 1;self.$selector.find('.city-count').find('i').text(i + 1);}};//存儲(chǔ)設(shè)置城市的值self.values = [];self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';//拼接后的選中namemosaicName = self.multiSelectResult.join(configure.mosaic);//添加選中的城市顯示方式if (configure.multiType === 1) {self.$selector.find('.city-name').html(''">'+ mosaicName +'');}//有值就去掉此classself.values.length > 0 ? self.$selector.find('.city-input').removeClass('not-val') : '';}}Cityselect.prototype.getCityVal = function () {//返回選中的城市return this.values[0];}Cityselect.prototype.update = function (data) {var self = this,template = functionality.template.join('');if (data.length > 0) {//重新更新城市數(shù)據(jù)self.newCityData = data;//重新生成城市分組functionality.filter(self);//主結(jié)構(gòu)生成輸出self.createSubject();//有設(shè)置城市默認(rèn)的就重新設(shè)置self.cityVal ? self.setCityVal(self.cityVal) : '';}}Cityselect.prototype.clear = function () {//清空選中的值this.multiSelectResult = [];this.multiSelectResultId = [];this.provinceId = [];this.values = [];this.selectIndex = 0;this.isfocus ? this.$selector.find('.input-search').val('').focus() : '';this.$selector.find('.caller').removeClass('active');this.$selector.find('.city-count').find('i').text('0');this.$selector.find('.city-info').find('span').remove();if (this.values.length < 1) {this.$selector.find('.city-input').removeClass('hide').addClass('not-val');}}Cityselect.prototype.status = function (status) {var self = this,$cityInfo = self.$selector.find('.city-info');if (status === 'disabled') {self.$selector.addClass('disabled').find('.input-search').prop('disabled', true);self.unBindEvent();} else if (status === 'readonly') {self.$selector.addClass('readonly').find('.input-search').prop('readonly', true);self.unBindEvent();}}//點(diǎn)擊以外的地方就隱藏$(document).on('click.cityselect', function (event) {var $citySelect = $('.city-select');if ($citySelect.find(event.target).length < 1) {$citySelect.removeClass('down').find('.city-pavilion, .city-list').addClass('hide');$citySelect.find('.city-input').removeClass('search-show').find('.input-search').val('');}});$.fn.citySelect = function (options) {return new Cityselect(options, this);};})(jQuery, window);
推薦案例
溫暖提示
請(qǐng)長按識(shí)別二維碼
想學(xué)習(xí)更多的java功能案例請(qǐng)關(guān)注
Java項(xiàng)目開發(fā)
如果你覺得這個(gè)案例以及我們的分享思路不錯(cuò)，對(duì)你有幫助，請(qǐng)分享給身邊更多需要學(xué)習(xí)的朋友。別忘了《留言+點(diǎn)在看》給作者一個(gè)鼓勵(lì)哦！
評(píng)論
圖片
表情