侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

自己实现的多选select

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 137 阅读 / 1,293 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
定义
/**
 * 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([]);
0

评论区