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

multiple Select2中的默认行为是所选选项对.Select2结果ul隐藏（可通过纯css进行调整）

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

任何和所有的想法都是高度赞赏的。

---

干杯

我想，我寻求帮助的速度太快了（但有时写下问题确实有帮助）

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');
                }
            }
        });

$（'.s2'）。打开（'select2-selection'，函数（e）{
existingVals=$（this.val（）；
如果（！existingVals | | existingVals.length==0）返回；
对于（a=0；a不要编辑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);
    }
}

Select2.class.multi.prototype.findHighlightableChoices=函数（）{
返回此.results.find（“.select2 result-selectable:not（.select2-disabled）”；
};
var Select2TriggerSelect=Select2.class.multi.prototype.triggerSelect；
Select2.class.multi.prototype.triggerSelect=函数（数据）{
if（this.val（）.indexOf（this.id（数据））！=-1）{
var val=这个.id（数据）；
var evt=$.Event（“select2删除”）；
evt.val=val；
evt.choice=数据；
this.opts.element.trigger（evt）；
if（evt.isDefaultPrevented（））{
返回false；
}
var existingVals=this.val（）；
var self=这个；
如果（！existingVals | | existingVals.length==0）返回true；
对于（a=0；a
我无法让这些解决方案中的任何一个按我想要的方式工作，因此我在Select2中编写了我自己的可切换项实现。功能包括：


在单独的表单行上显示主要选定项
在隐藏表单字段中提交主要选定项选择
自动将第一个选定项目设置为主项目
用绿色渐变亮显主要选定项
不修改Select2源
支持任何普通Select2选项
支持动态表单字段的销毁接口
使用
。在一个选项上选择2 primary
class可将其默认为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);
    }
});

完整代码如下：

我写信详细解释了该解决方案。
cool…您自己修复了它。请与select2开发人员共享该解决方案。他们可能会考虑添加该功能。
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);
    }
});