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-01" id="sel-01" class="select2-multiple">
    <option></option>
    <option value="AL">india</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-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",
  })

});