Question

多个Select2中的默认行为是从.select2-results ul隐藏所选选项（可以通过纯css调整）。

.select2-results .select2-selected {
    display: block !important;
    position: relative;
    margin-left: 10px;
}

http://jsfiddle.net/3Vb6d/

但是，所选的选项也不可点击。我正在寻找一种通过点击在下拉列表中切换选项的方法。

任何和所有想法都受到高度赞赏。干杯！

Answer 1

我想，我太快找不到帮助了（但有时候写下这个问题确实有帮助。）

1＆GT;我必须修改核心select2.js以使选定的选项至少接受悬停事件，或者突出显示，因为select2.js会调用它。在1542行附近有一个方法findHighlightableChoices。而不是寻找这些

return this.results.find(".select2-result-selectable:not(.select2-disabled):not(.select2-selected)");

它不应该注意已经＆＃34; -selected＆＃34;课程，所以我在这里做了一个小改动：

   return this.results.find(".select2-result-selectable:not(.select2-disabled)");//:not(.select2-selected)");

2 - ;现在所有元素（包括已经选择的元素）都是可点击的，我只是抓住了＃34; select2-selecting＆＃34;事件，看看，它是什么。如果选择了相同的元素 - 将其从数组中删除并重置数组，如下所示：

            $('.s2').on('select2-selecting', function(e){
            existingVals = $(this).val();
            if (!existingVals || existingVals.length == 0) return;
            for (a = 0; a<existingVals.length; a++) {
                if (existingVals[a] == e.val) {
                    e.preventDefault();
                    existingVals[a] = '';
                    $(this).val(existingVals).trigger('change');
                }
            }
        });

那就是它！

Select2只是一个很棒的插件。

Answer 2

不要编辑select2.js。只需在你的js中使用它：

Select2.class.multi.prototype.findHighlightableChoices = function () {
    return this.results.find(".select2-result-selectable:not(.select2-disabled)");
};

var Select2TriggerSelect = Select2.class.multi.prototype.triggerSelect;

Select2.class.multi.prototype.triggerSelect = function (data) {
    if (this.val().indexOf(this.id(data)) !== -1) {

        var val = this.id(data);
        var evt = $.Event("select2-removing");
        evt.val = val;
        evt.choice = data;
        this.opts.element.trigger(evt);

        if (evt.isDefaultPrevented()) {
            return false;
        }

        var existingVals = this.val();
        var self = this;
        if (!existingVals || existingVals.length == 0) return true;
        for (a = 0; a < existingVals.length; a++) {
            if (existingVals[a] === val) {
                existingVals[a] = '';
                this.val(existingVals);
                this.results.find('.select2-result').each(function () {
                    var $this = $(this);
                    if (self.id($this.data('select2-data')) === val) {
                        $this.removeClass('select2-selected');
                    }
                });
            }
        }

        this.opts.element.trigger({ type: "select2-removed", val: this.id(data), choice: data });
        this.triggerChange({ removed: data });

    } else {
        return Select2TriggerSelect.apply(this, arguments);
    }
}

Answer 3

我无法按照我想要的方式使用任何这些解决方案，所以我在Select2中编写了自己的可切换项目的实现。功能包括：

在单独的表格行上显示主要选定项目
在隐藏的表单字段中提交主要选定项目选项
自动将首选所选项目设为主要
使用绿色渐变突出显示主要选定项目
不会修改Select2来源
支持任何正常的Select2选项
支持动态表单字段的销毁界面
使用.select2-primary类选项将其默认为Primary

它附加了一个点击和一个更改处理程序，并调用了一个完成工作的函数selectPrimary

s2Instance.container.on('click.s2p','.select2-search-choice', function(e) {
    selectPrimary($(this));
});
$element.on('change.s2p', function(e) {
    if (e.added && s2Instance.val().length === 1) {
        // if it's the first one added, set it as Primary automatically
        selectPrimary();
    } else {
        // auto detect what should be primary in other cases
        selectPrimary(null, true);
    }
});

完整代码在这里： http://jsfiddle.net/HugeHugh/o5veephv/

我写了this blog post来详细解释解决方案。

如何在多个Select2中使所选选项可单击（和切换）？

3 个答案: