Bootstrap Select Dropdown for Bootstrap 4

A jQuery plugin for Bootstrap 4 that converts <select> and <select multiselect> elements to dropdowns. Uses fuse.js for fuzzy search and Bootstrap's dropdown plugin.

Examples

Defaults (no options)

Select

Default Bootstrap Select Dropdown on a <select> element. 

<div class="form-group">
  <label for="demo_default_select">Select your favourite food</label>
  <select id="demo_default_select" class="form-control" data-role="select-dropdown">
    <!-- options -->
  </select>
</div>

Select with option groups

Default Bootstrap Select Dropdown on a <select> with <optgroup> elements. 

<div class="form-group">
  <label for="demo_default_select_optgroups">Select food from food groups</label>
  <select id="demo_default_select_optgroups" class="form-control" data-role="select-dropdown">
    <!-- optgroup -->
      <!-- options -->
  </select>
</div>

Multiselect

Default Bootstrap Select Dropdown on a <select multiple> element. 

<div class="form-group">
  <label for="demo_default_multiselect">Select one or more favourite foods</label>
  <select id="demo_default_multiselect" class="form-control" data-role="select-dropdown multiple>
    <!-- options -->
  </select>
</div>

Multiselect with option groups

<div class="form-group">
  <label for="demo_default_multiselect_optgroups">Select one or more foods from food groups</label>
  <select id="demo_default_multiselect_optgroups" class="form-control" data-role="select-dropdown" multiple>
    <optgroup label="Carbohydrates">
      <!-- options -->
    </optgroup>
  </select>
</div>