Select2 4.x Selectboxes

by wasikuss

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/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://rawcdn.githack.com/wasikuss/select2-multi-checkboxes/73c0bd896b19bbe2ad4a20f13e288b26ae4eeb4c/select2.multi-checkboxes.js"></script>
<div class="row">
  <select name="sel-01" id="sel-01" class="select2-multiple" multiple>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
    <option selected value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option selected value="ID">Idaho</option>
    <option selected value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option...

CSS

.select2-results__option .wrap:before{
    font-family:fontAwesome;
    color:#999;
    content:"\f096";
    width:25px;
    height:25px;
    padding-right: 10px;
    
}
.select2-results__option[aria-selected=true] .wrap:before{
    content:"\f14a";
}

/* not required css */

.row
{
  padding: 10px;
}

.select2-multiple, .select2-multiple2
{
  width: 50%
}

JavaScript

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

jQuery(function($) {
  $('.select2-multiple').select2MultiCheckboxes({
    placeholder: "Choose multiple elements",
    width: "auto"
  })
  $('.select2-multiple2').select2MultiCheckboxes({
    templateSelection: function(selected, total) {
      return "Selected " + selected.length + " of " + total;
    }
  })
  $('.select2-original').select2({
    placeholder: "Choose elements",
    width: "100%"
  })
});