Select2 multi-selectSelect All

How to add a 'select all' button to select2 multi-select form.

by thelittlewozniak

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<body>
<select class="js-source-states" multiple="multiple">
  <option value="AK">Alaska</option>
  <option value="HI">Hawaii</option>
  <option value="CA">California</option>
  <option value="NV">Nevada</option>
  <option value="OR">Oregon</option>
  <option value="WA">Washington</option>
  <option value="AZ">Arizona</option>
  <option value="CO">Colorado</option>
  <option value="ID">Idaho</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NM">New Mexico</option>
  <option value="ND">North Dakota</option>
  <option value="UT">Utah</option>
  <option value="WY">Wyoming</option>
  <option value="AL">Alabama</option>
  <option value="AR">Arkansas</option>
  <option value="IL">Illinois</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="OK">Oklahoma</option>
  <option value="SD">South Dakota</option>
  <option value="TX">Texas</option>
  <option value="TN">Tennessee</option>
  <option value="WI">Wisconsin</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="IN">Indiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="OH">Ohio</option>
  <option value="PA">Pennsylvania</option>
 ...

CSS

@import url("//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css");

JavaScript

$.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>'
    );

    var checkOptionsCount = function()  {
      var count = $('.select2-results__option').length;
      $selectAll.prop('disabled', false);
    }
    
    
    var $container = $('.select2-container');
    $container.bind('keyup click', checkOptionsCount);

    var $dropdown = $rendered.find('.select2-dropdown')

    
    $dropdown.prepend($selectAll);

    $selectAll.on('click', function (e) {
      var $results = $rendered.find('.select2-results__option[aria-selected=false]');
      console.log($results);
      // Get all results that aren't selected
      $results.each(function () {
        var $result = $(this);
        console.log('$result: %o', $result);
        // Get the data object for it
        var data = $result.data('data');
        console.log("data: %o", data);
        
        // Trigger the select event
        self.trigger('select', {
          data: data
        });
      });
      
      self.trigger('close');
    });
    
    return $rendered;
  };

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