jquery插件实现省市县三级联动功能效果
Java项目开发
共 39689字,需浏览 80分钟
·
2020-12-20 12:51
点击上方 java项目开发,选择 设为星标
优质文章,及时送达
案例功能效果图
前端页面效果图
环境介绍
前端:vue+h5
完整源码获取方式
源码获取方式
扫码关注回复【ssx】获取完整源码
如果你在运行这个代码的过程中有遇到问题,请加小编微信xxf960513,我拉你进对应微信学习群!!帮助你快速掌握这个功能代码!
核心代码介绍
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 = {};
/**
* 构造器
*/
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 = [
', '
'
',','{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);
//禁止点击后的回调
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 += '+ 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);
推荐案例
温暖提示
请长按识别二维码
想学习更多的java功能案例请关注
Java项目开发
如果你觉得这个案例以及我们的分享思路不错,对你有帮助,请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦!
评论