Select2 3.x Selectboxes

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<select name="sel-01[]" id="sel-01" class="select2-multiple" multiple>
    <option></option>
    <option value="AL">Alabama</option>
    <option value="CA">California</option>
    <option value="NY">New York</option>
    <option value="TX">Texas</option>
    <option value="WY">Wyoming</option>
</select>
<br>
<button class="btn btn-default">get items</button>

CSS

.select2-result-label .wrap:before {
    position:absolute;
    left:4px;
    font-family:fontAwesome;
    color:#999;
    content:"\f096";
    width:25px;
    height:25px;
}
.select2-result-label .wrap.checked:before {
    content:"\f14a";
}
.select2-result-label .wrap {
    margin-left:15px;
}

JavaScript

function arr_sub(a1, a2) {
        var a = [],
            sub = [];
        for (var i = 0; i < a1.length; i++)
        a[a1[i]] = true;
        for (var i = 0; i < a2.length; i++)
        if (a[a2[i]]) delete a[a2[i]];
        for (var k in a)
        sub.push(k);
        return sub;
    }


    $('.select2-multiple').each(function () {

        var s2 = $(this).select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            placeholder: 'Choose elements',
            closeOnSelect: false,
            formatSelection: function () {

                var select2 = this.element.data('select2');
                var total = $('option', this.element).length - 1;
                var data = select2.data();
                return data.length + ' > ' + total + ' total';

            },
            formatResult: function (item) {

                var classes = ['wrap'];
                if ($(item.element[0]).hasClass('checked')) classes.push('checked');
                return $('<div>').text(item.text).addClass(classes.join(' '));

            }

        }).data('select2');


        s2.onSelect = function (data, options) {

            $(data.element[0]).toggleClass('checked');
            var $t = $(options.target);

            if (!$t.hasClass('wrap')) {
                $t = $('.wrap', $t);
                $t.toggleClass('checked');
            }
            var total = $('option', this.select).length - 1;
            var oldData = this.selection.data("select2-data");
            var data = [];

            $('.checked', this.select).each(function () {
                var $t = $(this);
                console.log($t);

                data.push($t.val());
            });

            var container = this.selection.find(".select2-chosen");
            container.empty();

            if (data.length > 0) {

                this.selection.data("select2-data", data);
                container.append(this.opts.formatSelection());
              ...