javascript - 如何使选定的选项在多个 Select2 中可单击(并可切换)？

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> 我必须修改核心 select2.js 以使所选选项至少接受悬停事件或突出显示(如 select2.js 所说)。在第 1542 行附近有一个方法 findHighlightableChoices。而不是寻找这些

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

它不应该关注已经“选择”的类，所以我在这里做了一个小改变:

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

2> 现在，所有元素(包括已选择的元素)都是可单击的，我只需捕获“select2-selecting”事件并查看它的含义。如果选择相同的元素 - 将其从数组中删除并重置数组，如下所示:

            $('.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 只是一个很棒的插件。