select2 multiple select for status

by Jason Crowther

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select id="status" multiple style="width: 20em">
  <option value="a" selected>Any</option>
  <option value="1">Awaiting Sales Action</option>
  <option value="2">Qualified (in CRM)</option>
  <optgroup label="Disqualified">
    <option value="3">Not a Good Fit</option>
    <option value="4">No Longer Interested</option>
    <option value="5">Junk/Solicitation</option>
    <option value="6">Career Inquiry</option>
    <option value="7">Media/PR</option>
    <option value="8">Sanctioned Country</option>
  </optgroup>
</select>

JavaScript

$(document).ready( function(){
	$('#status').select2().on('select2:select', function (e) {

		// dig out the val for the item selected
    var v = e.params.data.element.value;

		// make a new array for the updated options
    // selected
    var a = new Array;
    
    if( v == 'a') {
			// 'any' option selected
      // clear everything else
			a.push('a');
    } else {
    	// one of the other options selected
      // yank out the 'any' option
      a = $.map( $('#status').val(), function(n,i){
      	if( n != 'a' )
        	return n;
      });
    }
		// update the selected options in the
    // widget.
		$('#status').val(a).trigger('change');
	});
});