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

Use Bootstrap Select Dropdown to improve the user experience for long option lists. Compared to a regular multiselect, this plugin adds:

  • a search box;
  • keyboard navigation for search; and
  • select/deselect all controls.

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

An example of a minimal configuration. A profile: minimal option is offered as a shortcut that sets a range of options to disable search, disable badges and remove any extra controls.

<div class="form-group">
<label for="demo_overview_minimal">Select a food</label>
<select id="demo_overview_minimal" class="form-control" data-role="select-dropdown" data-profile="minimal">
<!-- options -->
</select>
</div>

An example of a minimal configuration on a <select multiselect> element. Individual configuration options are set in this example rather than using the profile: minimal shortcut.

<div class="form-group">
<label for="demo_overview_minimal_multiselect">Select a food</label>
<select id="demo_overview_minimal_multiselect" class="form-control">
<!-- options -->
</select>
</div>

<script>
  $(document).ready(function(){
    $("#demo_multiselect").selectDropdown({
      'search': false,
      'badges': false,
      'deselectAll': false,
      'selectAll': false,
      'showSelected': false
    });
  });
</script>

An example to demonstrate available options. For a full list of options, consult the options documentation.

<div class="form-group">
  <label for="demo_overview_icons_badges">Select one or more countries</label>
  <select id="demo_overview_example" class="form-control" multiple>
    <!-- options -->
  </select>
</div>

<script>
  $(document).ready(function(){
    $("#demo_multiselect").selectDropdown({
      'maxListLength': 4,
      'badges': false,
      'selectButtons' : true,
      'htmlDeselectAll': '<svg class="ion"><use xlink:href="#ion-close-circled"></use></svg>',
      'htmlSelectAll': '<svg class="ion"><use xlink:href="#ion-checkmark-circled"></use></svg>'
    });
  });
</script>

In this example, the following options have been set.

  • maxListLength is set to 4, adding up to 4 comma separated selected options to the button text. For 5 or more selections, the button text reverts to %count_selected% selected.
  • badges are disabled for a more compact mutliselect.
  • selectButtons is set to true, which transforms the 'Deselect all' and 'Select all' dropdown options into input group buttons.
  • htmlDeselectAll and htmlSelectAll contain SVG icons. Bootstrap does not ship with an icon framework by default, so some integration may be required. In this example, SCSS/CSS has been applied to make SVG icons work (height, width, fill) within buttons and badges.