Question

我正在使用Select2（v3.5.2）并尝试允许用户从多个下拉列表中选择一个或多个值。

想象一下这个简单的伪html标记：

<select class='select2' multiple>
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>
</select>

和jQuery：

$(document).ready(function() {
  $('.select2').select2();
});

默认功能只允许选择选项（A，B，C）一次，在我的场景中，我需要用户能够多次选择相同的选项，以便可以实现以下选项：

A,A,A,B,C
A,B,B,B,C,C
A,A,A,B,B,C,C,C
etc...

从我的搜索开始，它似乎不受版本3.5.2支持，但有些帖子提到版本4.0.x支持它。

但是，我找不到任何关于v4的文档，而且我还是宁愿不升级到4。

有谁知道如何使其适用于版本3（或4）？

Answer 1

正如您所提到的，似乎在版本4.0中修复了选择多个类似值的功能，但我在文档中找不到对它的引用。所以我必须使用// Add a listener for port connections chrome.runtime.onConnect.addListener(function(port) { // If there is a 'getCoins' connection coming in... if(port.name == "getCoins") { // ...add a listener that is called when the other side posts a message on the port. port.onMessage.addListener(function(msg) { port.postMessage(_playerCoins); }); } } 3.2v框架编写功能。如果你仔细观察渲染的DOM，你会发现select2基本上添加了类select2，并在你从下拉列表中选择一个项目时移除了类select2-disabled，所以交易是添加select2-result-selectable回来。

select2-result-selectable

工作示例：https://jsfiddle.net/DinoMyte/qcgvucnz/1/

Answer 2

我找到了 4.0 的解决方案。这个解决方案不是最好的，但它是有效的。抱歉我的英语不好！

 $("#periodos").on("select2:select",function(e){    
    e.preventDefault();
    let limite_periodos        = $("#schemas").val().length;
    var element                = e.params.data.element;
    var $element               = $(element);
    $element.detach();
    $(this).append($element);
    $(this).trigger("change");              
    $("#periodos").append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
    $('#periodos').trigger('select2:close');
    return true;
}); 
$('#periodos').on('select2:unselect',function(event){
    var detect                 = false;
    var element                = event.params.data.text;            
    var selections             = $('#periodos').select2('data');
    var el                     = event.params.data.element;
    var $el                    = $(el);
    $el.detach();
}); 
$('#periodos').on('select2:close',function(event){  
    var select = document.getElementById("periodos");
    var options = [];           
    document.querySelectorAll('#periodos > option').forEach(
      option => options.push(option)
    );          
    while (select.firstChild) {
        select.removeChild(select.firstChild);
    }   
    options.sort((a, b) => parseInt(a.innerText)-parseInt(b.innerText));        
    for (var i in options) {
        select.appendChild(options[i]);
    }           
});

选择2允许重新选择相同的值

2 个答案: