Select2 3.x Selectboxes

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://rawgit.com/wasikuss/select2-multi-checkboxes/select2-3.5.x/select2.multi-checkboxes.js"></script>
<div class="row">
  <select name="sel-01" id="sel-01" class="select2-multiple">
    <option></option>
    <option value="100">india</option>
    <option value="200">California</option>
    <option value="300">New York</option>
    <option value="400">Texas</option>
    <option value="500">Wyoming</option>
  </select>
</div>

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;
}

/* not required css */

.row {
  padding: 10px;
}

JavaScript

/**
 * jQuery Select2 Multi checkboxes
 * - allow to select multi values via normal dropdown control
 * 
 * author      : wasikuss
 * repo        : https://github.com/wasikuss/select2-multi-checkboxes/tree/select2-3.5.x
 * inspired by : https://github.com/select2/select2/issues/411
 * License     : MIT
 */

jQuery(function($) {
  $('.select2-multiple').select2MultiCheckboxes({
    placeholder: "Choose multiple elements"
  });
  
  $('.select2-multiple').on('change',function(selected){
	var selected = selected.added,
  		UnSelect = [];
      console.log(selected);
      if(selected){
      	var total = 0;
      	for (var i = 0; i < selected.length; i++) {
          total += selected[i] << 0;
      	}	
      }
      
   	$(this).find('option').each(function(){
    
			
   	 	if(!$(this).hasClass('checked')){
   		 var UnS = $(this).attr('value');
       		UnSelect.push(UnS);
    	}
 	 	});
    console.log(total);
    console.log('Unselected = '+UnSelect,'Selected = '+ selected);
   });
	
});