Select 2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Page Demo Plugin Website

Examples

<!-- Basic Example -->
<select class="select2">
   <option>Subaru</option>
   <option>Mitsubishi</option>
   <option>Scion</option>
</select>



<!-- Disabled Select -->
<select class="select2" disabled>
   ...
</select>


<!-- Disabled Options -->
<select class="select2">
    <option>Subaru</option>
    <option>Mitsubishi</option>
    <option disabled>Scion</option>
    <option disabled>Daihatsu</option>
    <option>Hino</option>
</select>


<!-- Hide Search Box -->
<select class="select2" data-minimum-results-for-search="Infinity">
   ...
</select>


<!-- Multiple -->
<select class="select2" multiple data-placeholder="Select one or more choices">
   ...
</select>
// Function available at /js/app.min.js (concat from /js/inc/functions/vendors.js)

$('select.select2').select2({
    dropdownAutoWidth: true,
    width: '100%'
});

Requirements:

  • /scss/inc/vendor-overrides/_select2.scss
  • /vendors/select2/dist/css/select2.min.css
  • /vendors/select2/dist/js/select2.full.min.js