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)");

它不应该关注已经“-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 只是一个很棒的插件。