Mutliple select2

Hide tags

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>
<select id="e1" style="width:500px">
    <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>

CSS

.select2-result-label .wrap
{
    padding-left: 25px;
    background: url("http://i.stack.imgur.com/k4lVe.png") no-repeat;
}

.select2-result-label .wrap.checked
{
    padding-left: 25px;
    background: url("http://i.stack.imgur.com/x7dGh.png") no-repeat;
}

JavaScript

var s2;
jQuery(function($)
{
    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;
    }
    s2 = $( '#e1' ).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 +' selected from ' + 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()
        {
            data.push( $(this).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()  );
            this.selection.removeClass("select2-default");
            
            if (this.opts.allowClear && this.getPlaceholder() !==...