jquery插件实现省市县三级联动功能效果

Java项目开发

共 39689字,需浏览 80分钟

 ·

2020-12-20 12:51

点击上方 java项目开发选择 设为星标

优质文章,及时送达

--

案例功能效果图

前端页面效果图

环境介绍

前端:vue+h5


完整源码获取方式



源码获取方式

扫码关注回复【ssx】获取完整源码


如果你在运行这个代码的过程中有遇到问题,请加小编微信xxf960513,我拉你进对应微信学习群!!帮助你快速掌握这个功能代码!




核心代码介绍

city-select.css


   q, blockquote {    quotes: none}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none}
a img { border: none}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block}
.clearfix, .city-select .city-cont dl, .city-select .city-txt { *zoom: 1}
.clearfix:after, .city-select .city-cont dl:after, .city-select .city-txt:after { content: " "; display: table; height: 0; clear: both}
.city-select { font-size: 0; position: relative; display: inline-block}
.city-select .city-cont dl, .city-select .city-txt { *zoom: 1}
.city-select .city-cont dl:after, .city-select .city-txt:after { content: " "; display: table; height: 0; clear: both}
.city-select.down .city-info { border-bottom: none}
.city-select.down .city-info:after { border-top: none; border-bottom: 6px solid #ccc}
.city-select.multi .city-pavilion + .city-info .not-search { display: none}
.city-select.multi .city-pavilion + .city-info .not-search[class~="not-val"] { display: block}
.city-select.multi .city-pavilion.hide + .city-info .city-input { display: none}
.city-select.multi .city-pavilion.hide + .city-info .city-input[class~="not-val"] { display: block}
.city-select.multi .city-pavilion + .multi-type .city-input { display: block}
.city-select.multi .city-pavilion.hide + .multi-type .city-input[class~="not-val"] { display: block}
.city-select.multi .city-pavilion.hide + .multi-type .search-show { display: block}
.city-select.disabled .city-info { background-color: #eef1f6; cursor: not-allowed}
.city-select.disabled .city-info span { background-color: #eef1f6}
.city-select.disabled .city-info span:hover i { display: none}
.city-select.disabled .city-info span + .city-input { display: none}
.city-select.disabled .city-info input { cursor: not-allowed}
.city-select.readonly .city-info { cursor: default}
.city-select.readonly .city-info span:hover i { display: none}
.city-select.readonly .city-info span + .city-input { display: none}
.city-select.readonly .city-info input { cursor: default}
.city-select .city-info { border: 1px solid #ccc; background-color: #fcfcfc; cursor: pointer; width: 280px; overflow: hidden; padding: 8px; padding-top: 0; position: relative; z-index: 2}
.city-select .city-info:after { content: ''; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 6px solid #ccc; border-radius: 2px; display: block; width: 0; height: 0; position: absolute; top: 17px; right: 5px; -moz-transition: border .2s; -o-transition: border .2s; -webkit-transition: border .2s; transition: border .2s}
.city-select .city-info.multi-type span { background: none; padding: 5px 0; margin-right: 0}
.city-select .city-info.multi-type .span-over { width: 99%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.city-select .city-info.multi-type .city-input { display: block; width: 100%}
.city-select .city-info.multi-type .city-input.hide { display: none}
.city-select .city-info span { background-color: #f5f5f5; border-radius: 2px; color: #666; cursor: default; font-size: 14px; display: inline-block; vertical-align: middle; padding: 5px; margin-right: 5px; position: relative}
.city-select .city-info span + .city-input { width: auto}
.city-select .city-info span i { color: #fff; cursor: pointer; background: #ffbfbf; border-radius: 100%; display: block; width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 0; position: absolute; top: -5px; right: -5px; z-index: 1; visibility: hidden; opacity: 0; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s}
.city-select .city-info span i:after { content: '\D7'; font-size: 12px}
.city-select .city-info span:hover i { visibility: visible; opacity: 1}
.city-select .city-info .city-input, .city-select .city-info span { display: inline-block; vertical-align: middle; margin-top: 8px}
.city-select .city-input { width: 100%; position: relative; overflow: hidden}
.city-select .city-input.hide { display: none}
.city-select .city-input em { color: #999; display: block; font-style: normal; font-size: 12px; height: 24px; line-height: 24px}
.city-select input[type="text"] { background: transparent; border: none; box-sizing: border-box; color: #333; font-size: 12px; width: 100%; height: 24px; line-height: 24px \9; padding: 0 5px; outline: none}
.city-select .city-pavilion, .city-select .city-list { border: 1px solid #ccc; background: #fff; position: absolute; top: 100%; z-index: 999; left: 0; margin-top: -1px; transition-duration: 400ms; transform: translateY(0); opacity: 1; visibility: visible}
.city-select .city-pavilion.hide, .city-select .city-list.hide { transform: translateY(-2%); opacity: 0; visibility: hidden}
.city-select .city-pavilion { box-shadow: 0 2px 5px #ddd; width: 467px}
.city-select .city-tabs { border-bottom: 1px solid #ccc; background: #fbfbfb; font-size: 0}
.city-select .city-tabs a { border-bottom: 1px solid transparent; display: inline-block; font-size: 14px; color: #666; padding: 0 6px; height: 36px; line-height: 36px; text-align: center; position: relative; bottom: -1px; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s}
.city-select .city-tabs a:hover { border-bottom-color: #000}
.city-select .city-tabs a.active { border-bottom-color: #02aec7; color: #02aec7; cursor: default}
.city-select .city-tabs a.forbid { color: #bbb; cursor: not-allowed}
.city-select .city-tabs a.forbid:hover { border-bottom-color: transparent}
.city-select .city-cont { padding-top: 20px; padding-left: 20px; font-size: 0; position: relative; max-height: 200px; overflow-x: hidden; overflow-y: auto}
.city-select .city-cont dl:first-child dd { margin-left: 0}
.city-select .city-cont dt, .city-select .city-cont dd { display: inline-block; vertical-align: top; float: left}
.city-select .city-cont dt { color: #02aec7; font-size: 16px; width: 28px}
.city-select .city-cont dd { font-size: 14px; width: 421px; margin-top: -10px; margin-left: -10px; padding-bottom: 20px}
.city-select .city-cont dd a { color: #666; display: inline-block; padding: 5px 7px; margin-top: 5px; margin-left: 5px; -moz-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s}
.city-select .city-cont dd a:hover { background: #f5f5f5; border-radius: 2px}
.city-select .city-cont dd a.active { background: #02aec7; border-radius: 2px; color: #fff; box-shadow: 0 0 5px #ddd}
.city-select .city-cont dl { transition-duration: 400ms; opacity: 1; transform: translateX(0)}
.city-select .city-cont dl.hide { display: none; opacity: 0; transform: translateX(5%)}
.city-select .city-list { font-size: 0; width: 298px; max-height: 170px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box}
.city-select .city-list li { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; cursor: pointer; padding: 10px 5px; position: relative; margin-bottom: -1px}
.city-select .city-list li:first-child { border-top: none}
.city-select .city-list li:hover { background-color: #f9f9f9}
.city-select .city-list li.active { border-left: 2px solid #02aec7; background-color: #f0fbfd}
.city-select .city-list li.hover { border-bottom-color: #02aec7; background-color: #f9f9f9; z-index: 2}
.city-select .city-list li.hover span { text-indent: 10px}
.city-select .city-list li.not-have { background-color: #fff; color: #999; font-size: 14px; cursor: not-allowed; line-height: 1.5; padding: 5px}
.city-select .city-list li.not-have strong { color: #02aec7; font-style: normal; padding: 0 5px}
.city-select .city-list span { display: inline-block; font-size: 14px; width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -moz-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s}
.city-select .city-list span.spell { text-align: right; font-size: 12px; color: #02aec7}
.city-select .city-txt { color: #999; font-size: 12px; margin-bottom: 10px; vertical-align: text-bottom; padding-top: 10px; padding-left: 20px}
.city-select .city-txt a, .city-select .city-txt span { display: block; float: right; margin-right: 10px; vertical-align: top}
.city-select .city-txt em { font-style: normal}
.city-select .city-txt a { color: #dc8383; margin-top: -3px}
.city-select .city-txt a:hover { color: #02aec7}
.city-select .city-txt a i { background: url(http://images.vrm.cn/2017/07/26/del.png) no-repeat; width: 16px; height: 16px; display: inline-block; vertical-align: middle}
.city-select .city-txt span { letter-spacing: 2px}
.city-select .city-txt i { color: #02aec7}
.city-select .city-tips { background: rgba(0, 0, 0, 0.7); border-radius: 2px; color: #fff; font-size: 14px; text-align: center; padding: 0 10px; position: absolute; top: 5px; left: 50%; line-height: 36px; margin-left: -50px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B200000, endColorstr=#B200000); transition-duration: 400ms; transform: translateY(0); opacity: 1; visibility: visible; z-index: 5}
.city-select .city-tips.hide { transform: translateY(5%); opacity: 0; visibility: hidden}

Cityselect.js

(function ($, window) {    var functionality = {};
/** * 构造器 */ 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(); }
/** * 默认参数 */ Cityselect.defaults = { dataJson: null, convert: true, whole: false, shorthand: false, search: true, multiSelect: false, multiMaximum: 5, multiType: 0, mosaic: ',', placeholder: '请选择城市', searchPlaceholder: '输入关键词搜索', hotCity: [], onInit: function () {}, onForbid: function () {}, onTabsAfter: function (target) {}, onTabsForbid: function (target) {}, onCallerAfter: function (target, values) {} };
/** * 内部函数 */ 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); } });
// 根据省份ID,查找出所有的城市 for (var i = 0; i < resultId.length; i++) { $.each(data, function (key, value) { if (resultId[i] === value.parentId) { result.push(value); } }); }
// 存储省份 this.province = province;
// 筛选出除了省份外的数据 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;
// 包含市县级数据,否则市级数据 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) { //匹配城市数据 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: }
//如果有设置热门城市,就输出设置的,反正就去取默认城市前面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 = [ '
    ', '
    ', '热门城市', 'AB', 'CD', 'EFG', 'HI', 'JK', 'LM', 'NOP', 'QR', 'S', 'TU', 'VWX', 'Y', 'Z', '
    ', '
    ', '{cont}', '
    ', '

    ', '清空0/{maxnum}', '*可以直接搜索查找城市(支持名称、拼音模糊搜索)', '

    ', '
    ', '
    ', '{name}', '
    ', '', '
    ', '
    ', '
      '
      ,
      '
      最多只能选择{tipnum}
      '
      ];
      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);
      //禁止点击后的回调 if ($(event.currentTarget).hasClass('forbid')) { configure.onForbid.call(self); return false; }
      //点击删除 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();
      //有值就加选中状态 functionality.defSelected.call(self); }
      functionality.tabs = function (event) { var $target = $(event.target), configure = this.options, letter = $target.data('letter'); //tabs禁止点击后的回调 if ($target.hasClass('forbid')) { configure.onTabsForbid.call(self, $target); return false; }
      //添加选中状态 $target.addClass('active').siblings().removeClass('active');
      //显示对应索引的城市列表 this.$selector.find('dl').addClass('hide').siblings('.city-'+ letter).removeClass('hide');
      //切换列表回调 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');
      //存储选中的值 this.values = []; this.values.push({ 'name': name, 'id': id, 'parentId': parentId });
      //添加选中状态 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('');
      //调整文本框位置 functionality.singleResize.call(this);
      //隐藏弹窗 this.$selector.removeClass('down').find('.city-pavilion, .city-list').addClass('hide');
      //没有开启搜索且数组是不为空 if (!this.options.search && this.values.length > 0) { this.$selector.find('.city-input').addClass('hide'); }
      //选择之后的回调 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 +'';
      //添加选中状态 $selector.find('.caller[data-id="'+ id +'"]').addClass('active');
      //添加选中的城市显示方式 if (configure.multiType < 1) { $selector.find('.city-input').before(joinSpan); }
      //选中数 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);
      //去掉选中状态 $selector.find('.caller[data-id="'+ id +'"]').removeClass('active');
      //删除选中的城市 $selector.find('.city-info').find('span[data-id="'+ id +'"]').remove();
      //选中数 self.selectIndex -= 1; }
      //存储选中的值 self.values = []; self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';
      //拼接后的选中name mosaicName = 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'); }
      //添加选中数 $selector.find('.city-count').find('i').text(self.selectIndex);
      //选择之后的回调 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 +'相关城市
    • '
      ;

      self.$selector.find('.city-list').html(resultHtml);
      //有值就加选中状态 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;
      //有选中的,就添加选中状态 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键,执行选中事件 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;
      //循环选择 index = index === $items.length ? 0 : index;
      //添加选中状态 $items.removeClass('hover').eq(index).addClass('hover');
      if (!hasNothave) { //滚动条跟随定位 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);
      //存储剩下城市的值 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');
      //如果是多选才执行以下事情 if (self.options.multiSelect) { self.selectIndex -= 1; self.$selector.find('.city-count').find('i').text(self.selectIndex);
      //数组是空 self.values.length < 1 ? self.$selector.find('.city-input').addClass('not-val') : ''; } else { //调整文本框位置 functionality.singleResize.call(self);
      } }
      /** * 原型方法 */ Cityselect.prototype.init = function () { var self = this, configure = this.options;
      //开启转换就用新的json,否则就用正常格式 self.newCityData = configure.convert ? functionality.recombine.call(self, configure.dataJson) : configure.dataJson;
      //城市分类生成json functionality.filter(self);
      //主结构生成输出 self.createSubject();
      //绑定事件 self.bindEvent();
      //初始化回调 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++ ) { //字母数组 groupArray = functionality.groupArray[i];
      //不是热点城市的字母就不做拆分处理 letterStr = groupArray !== 'HOT' ? functionality.split(groupArray) : '';
      //添加隐藏class hide = i > 0 ? ' hide' : '';
      //创建对应的dl domtel += '
      '" data-letter="'+ groupArray +'">{dl}
      '
      ;

      if (letterStr && letterStr.length > 1) {
      list = '';
      for (var j = 0; j < letterStr.length; j++) {
      montage = functionality.montage.call(self, 0, letterStr[j]);
      //不为空就执行下面创建节点 if (montage) {
      list += '
      '+ letterStr[j] +'
      '
      +
      '
      '+ montage +'
      '
      ;

      }
      }
      } else {
      montage = functionality.montage.call(self, 0, groupArray); //不为空就执行下面创建节点 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('');
      //添加搜索默认文本提示 template = template.replace('{placeholder}', configure.searchPlaceholder);
      //添加多选提示最大选择数 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 ? '
      '
      : '');

      //添加多选class configure.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掉搜索dom
      if (!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'); }
      //没有数据输出的就添加禁止点击 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));
      //点击选择城市 $selector.on('click.cityselect', '.caller', $.proxy(configure.multiSelect ? functionality.multiAchieve : functionality.singleAchieve, self));
      //点击清空 $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) { //存储设置城市变量 self.cityVal = val; //根据多选还是单选,多选不能超过设定的个数输出; 单选只能输出一个,设置多个只会输出第一个 !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);
      //添加选中状态 self.$selector.find('.caller[data-id="'+ value.id +'"]').addClass('active');
      //选中的值拼接dom joinSpan = ''" data-parentid="'+ value.parentId +'">'+ name +'';
      //添加选中的城市显示方式 if (configure.multiType < 1) { self.$selector.find('.city-input').before(joinSpan); } }
      });
      //如果是多选才执行以下事情 if (self.options.multiSelect) { self.selectIndex = i + 1; self.$selector.find('.city-count').find('i').text(i + 1); }
      };
      //存储设置城市的值 self.values = []; self.multiSelectResult.length > 0 ? self.values.push({ 'name': self.multiSelectResult, 'id': self.multiSelectResultId, 'parentId': self.provinceId }) : '';
      //拼接后的选中name mosaicName = self.multiSelectResult.join(configure.mosaic);
      //添加选中的城市显示方式 if (configure.multiType === 1) { self.$selector.find('.city-name').html(''">'+ mosaicName +''); }
      //有值就去掉此class self.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) { //重新更新城市数据 self.newCityData = data; //重新生成城市分组 functionality.filter(self); //主结构生成输出 self.createSubject(); //有设置城市默认的就重新设置 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(); } }
      //点击以外的地方就隐藏 $(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);
      - END -

      推荐案例

      温暖提示

      为了方便大家更好的学习,本公众号经常分享一些完整的单个功能案例代码给大家去练习,如果本公众号没有你要学习的功能案例,你可以联系小编(微信:xxf960513)提供你的小需求给我,我安排我们这边的开发团队免费帮你完成你的案例。
      注意:只能提单个功能的需求不能要求功能太多,比如要求用什么技术,有几个页面,页面要求怎么样?


      请长按识别二维码

      想学习更多的java功能案例请关注

      Java项目开发

      如果你觉得这个案例以及我们的分享思路不错,对你有帮助,请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦!

      浏览 26
      点赞
      评论
      收藏
      分享

      手机扫一扫分享

      分享
      举报
      评论
      图片
      表情
      推荐
      点赞
      评论
      收藏
      分享

      手机扫一扫分享

      分享
      举报