定义
/**
* Created by sj on 2018/4/26.
*/
(function ($) {
//初始化参数
var mySelect = function (ele, options) {
this.ele = ele;
this.defaults = {
mult: false
};
this.options = $.extend({}, this.defaults, options);
this.result = [];
};
mySelect.prototype = {
init: function () {//初始化函数
this.pubFunction();
this.initOption();
this.closeSelectEvent();
this.addEvent();
},
closeSelectEvent: function () {
var that = this;
this.ele.find(".inputWrap").on("click", function (event) {
event.stopPropagation();
if (that.ele.find(".inputWrap>i").hasClass("fa-angle-down")) {
that.ele.find(".inputWrap>i").removeClass("fa-angle-down").addClass("fa-angle-up");
that.ele.find(".mySelect-option").animate({height: "400px", opacity: "1"}, "fast", "swing")
} else {
that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
that.ele.find(".mySelect-option").animate({height: "0", opacity: "0"}, "fast", "swing")
}
});
$("html").on("click", function () {
that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
that.ele.find(".mySelect-option").animate({height: "0", opacity: "0"}, "fast", "swing")
})
},
pubFunction: function () {
Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return i; // 返回的这个 i 就是元素的索引下标，
}
}
return false;
}
},
initOption: function () {
//初始化输入框和option
this.ele.append('<div class="inputWrap"><ul></ul><i class="fa fa-angle-down"></i></div>');
this.ele.append('<div class="mySelect-option" style="z-index: 10;"></div>');
for (var i = 0; i < this.options.option.length; i++) {
if (this.options.option[i].disable)
this.ele.find(".mySelect-option").append('<div data-value="' + this.options.option[i].value + '" class="disabled"><span>' + this.options.option[i].label + '</span><i class="fa fa-check"></i></div>')
else
this.ele.find(".mySelect-option").append('<div data-value="' + this.options.option[i].value + '"><span>' + this.options.option[i].label + '</span><i class="fa fa-check"></i></div>')
}
},
addEvent: function () {
var that = this;
this.ele.find(".mySelect-option").find("div").on("click", function (event) {
event.stopPropagation();
//实现禁用的选项无法选择
if ($(this).hasClass("disabled")) {
alert("条件不符合,无法选择!")
return;
}
if (that.options.mult) {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
that.result.splice(that.result.contains($(this).attr("data-value")), 1)
//实现隐藏酒店选择
$(".hotel-select-" + $(this).attr("data-value")).hide();
} else {
$(this).addClass("selected");
that.result.push($(this).attr("data-value"))
//实现显示酒店选择
$(".hotel-select-" + $(this).attr("data-value")).show();
}
that.refreshInput();
} else {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
that.result = '';
} else {
that.ele.find(".mySelect-option").find("div").removeClass("selected");
$(this).addClass("selected");
that.result = $(this).attr("data-value");
that.ele.find(".inputWrap>i").removeClass("fa-angle-up").addClass("fa-angle-down");
that.ele.find(".mySelect-option").animate({height: "0", opacity: "0"}, "fast", "swing")
}
that.refreshInput($(this).find("span").text());
}
that.options.onChange(that.result)
});
},
inputResultRemoveEvent: function () {
var that = this;
this.ele.find(".inputWrap ul li i").on("click", function (event) {
event.stopPropagation();
//实现隐藏酒店选择
$(".hotel-select-" + $(this).attr("data-value")).hide();
that.result.splice(that.result.contains($(this).attr("data-value")), 1);
that.refreshInput();
that.removeOptionStyle($(this).attr("data-value"));
that.options.onChange(that.result);
})
},
removeOptionStyle: function (val) {
this.ele.find(".mySelect-option").find("div").each(function () {
if ($(this).attr("data-value") == val) {
$(this).removeClass("selected")
}
})
},
refreshInput: function (label) {
this.ele.find(".inputWrap ul").empty();
if (this.options.mult) {
for (var i = 0; i < this.options.option.length; i++) {
for (var j = 0; j < this.result.length; j++) {
if (this.result[j] == this.options.option[i].value) {
this.ele.find(".inputWrap ul").append('<li><span>' + this.options.option[i].label + '</span> <i data-value="' + this.options.option[i].value + '" class="fa fa-close"></i></li>')
}
}
}
} else {
if (this.result == '') {
this.ele.find(".inputWrap ul").empty()
} else {
this.ele.find(".inputWrap ul").append('<li><span>' + label + '</span> </li>')
}
}
this.inputResultRemoveEvent();
},
setResult: function (res) {
this.result = res;
if (this.options.mult) {
if (res instanceof Array) {
this.refreshInput();
this.ele.find(".mySelect-option").find("div").each(function () {
for (var i = 0; i < res.length; i++) {
if ($(this).attr("data-value") == res[i]) {
$(this).addClass("selected")
return;
}
$(this).removeClass("selected")
}
})
} else {
alert("参数必须是数组")
}
} else {
for (var i = 0; i < this.options.option.length; i++) {
if (this.options.option[i].value == res) {
this.refreshInput(this.options.option[i].label)
}
}
this.ele.find(".mySelect-option").find("div").each(function () {
if ($(this).attr("data-value") == res) {
$(this).addClass("selected")
}
})
}
},
getResult: function () {
return this.result;
}
};
$.fn.mySelect = function (options) {
var select = new mySelect(this, options);
select.init();
return select;
};
})(jQuery);
使用
mySelect = $("#mySelect").mySelect({
mult: true,//true为多选,false为单选
option: [//选项数据
<c:forEach var="item" items="${tourist}">
<c:choose>
<c:when test="${item.child&&item.lady}">
{
label: "${item.name}<span class='myTag tagChild' style='display:none;'>不适合小孩</span><span class='myTag tagLady' style='display:none;'>不适合老人</span>",
value: "${item.name}",
disable: false
},
</c:when>
<c:when test="${!item.child&&!item.lady}">
{label: "${item.name}", value: "${item.name}", disable: false},
</c:when>
<c:when test="${item.child}">
{
label: "${item.name}<span class='myTag tagChild' style='display:none;'>不适合小孩</span>",
value: "${item.name}",
disable: false
},
</c:when>
<c:when test="${item.lady}">
{
label: "${item.name}<span class='myTag tagLady' style='display:none;'>不适合老人</span>",
value: "${item.name}",
disable: false
},
</c:when>
</c:choose>
</c:forEach>
],
onChange: function (res) {//选择框值变化返回结果
console.log(res)
$("#gobycityname").val(res);
}
});
mySelect.setResult([]);
评论区