Select2 3.x Selectboxes

by koh_edwin

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-02" id="sel-02" class="select2-multiple2">
    <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>
</div>

CSS

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

/* 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-multiple2').select2MultiCheckboxes({
    	formatSelection: function(selected, total) {
      	return "Metrics" ;
      }
    })
    $('.select2-original').select2({
    	placeholder: "Choose elements",
      width: "100%"
    })
});