CODEWITHSUNDEEP
jquerymultiple-selectjquery-select2
dev7
dev7

Reputation: 6379

Select2 Allow re-selection of same value

I'm Using Select2 (v3.5.2) and trying to allow the user to select one or more values from a multiple dropdown.

Imagine this simple pseudo html markup:

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

And jQuery:

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

The default functionality allows selecting the options (A,B,C) only once, in my scenario I need the user to be able to select same option more than once so that the following can be possible:

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

From my search on it, it doesn't seem to be supported on version 3.5.2 but some posts mention it is supported on version 4.0.x.

However, I could not find any documentation on it for v4 and would really rather not to upgrade to 4 yet anyway.

Does anyone know how to make it work with version 3 (or 4)?

Upvotes: 3

Views: 4834

Answers (2)

user7972779
user7972779

Reputation:

I found solution for 4.0. This solution is not the best, but it work's. Sorry for my bad English!

 $("#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]);
    }           
});

enter image description here

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8868

As you mentioned, it seems the functionality of selecting multiple similar values was fixed in version 4.0 but I couldn't find a reference to that in the documentation. So I had to write the functionality using select2 3.2v framework. If you look closely to the rendered DOM, you would realize that select2 basically add class select2-disabled and removes class select2-result-selectable once you select an item from the dropdown, so the deal was to add select2-result-selectable back.

   // initiate select2
 $('.select2').select2(); 
 // delegate a click event on the input box
 $('.select2-input').on('click',function()
 {
   // remove select2-disabled class from all li under the dropdown
   $('.select2-drop .select2-results li').removeClass('select2-disabled');
    // add select2-result-selectable class to all li which are missing the respective class
   $('.select2-drop .select2-results li').each(function()
   {
     if(!$(this).hasClass('select2-result-selectable'))
       $(this).addClass('select2-result-selectable');
   });   
 });

   // had to include the following code as a hack since the click event required double click on 'select2-input' to invoke the event
 $('.select2-container-multi').on('mouseover',function()
 {
   $('.select2-input').click();
 });

Working example : https://jsfiddle.net/DinoMyte/qcgvucnz/1/

Upvotes: 3

Related Questions