Select2 multi-selectSelect All

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

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

var SELECT_ALL_LIMIT = 25;

$.fn.select2.amd.define('select2/selectAllAdapter', [
  '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.text('Select All (' + count + ')');
    }


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

      // 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
        console.log('triggering: ', data, self);
        self.trigger('select', {
          data: data
        });
      });

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

    return $rendered;
  };
	
  return Utils.Decorate(
  	Utils.Decorate(
    	Dropdown,
      AttachBody
    ),
  	SelectAll  
  );
})
  

$("select").select2({
  width: '100%',
  placeholder: "Select Option(s)...",
  dropdownAdapter: $.fn.select2.amd.require('select2/selectAllAdapter')
});