How to implement select all functionality with select2 jquery plugin configured with ajax search.?

Question

Iam currently using select2 jquery plugin to select data from list dynamically populated from an ajax call. I need to implement select all functionality so that users are able to select all the options at once by using a select all button. I have tried to implement this following this example in jsfidde.

Click here to see the jsfiddle

But for selecting a listing of larger number of items say 500 items.It makes the browser hang for a while. Please suggest a better way to implement this without any performance issues.

$.fn.select2.amd.require([
 'select2/utils',
 'select2/dropdown',
 'select2/dropdown/attachBody'
 ], function (Utils, Dropdown, AttachBody) {
 function SelectAll() { }

SelectAll.prototype.render = function (decorated) {
var $rendered = decorated.call(this);
var self = this;

var $selectAll = $(
  '<button type="button">Select All</button>'
);

$rendered.find('.select2-dropdown').prepend($selectAll);

$selectAll.on('click', function (e) {
  var $results = $rendered.find('.select2-results__option[aria-selected=false]');

  // Get all results that aren't selected
  $results.each(function () {
    var $result = $(this);

    // Get the data object for it
    var data = $result.data('data');

    // Trigger the select event
    self.trigger('select', {
      data: data
    });
  });

  self.trigger('close');
});

return $rendered;

};

 $("select").select2({
placeholder: "Select Option(s)...",
dropdownAdapter: Utils.Decorate(
  Utils.Decorate(
    Dropdown,
    AttachBody
  ),
  SelectAll
  ),
  });
 });

Answer 1

this is the duplicate question of JQuery Select2 - How to select all options

where solution given for multiple select with checkbox.

if its getting load than you should add extra hidden filed to get comma separated value.

try below code. HTML :

<select multiple id="e1" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>
<br>
<input type="checkbox" id="checkbox" >Select All
<br>
<input type="text" id="valueall" value="" name="valueall">

JQuery :

$("#e1").select2();
$("#checkbox").click(function(){
    if($("#checkbox").is(':checked') ){
        $("#e1 > option").prop("selected","selected");
        <!-- $("#e1").trigger("change"); -->
        $("#e1").select2('destroy'); 
        $("#e1").hide(); 
        $("#valueall").val($("#e1").val())
    }else{
        $("#e1 > option").removeAttr("selected");
         <!-- $("#e1").trigger("change"); -->
         $("#e1").select2(); 
        $("#e1").show(); 
         $("#valueall").val($("#e1").val())
     }
});

You can set type="hidden" for input field.