Bootstrap Select Dropdown

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.

Defaults

Plugin defaults:

$(document).ready(function(){
  $("#multiselect").selectDropdown({
    // Behaviour
    hideSelect: true,
    search: true,
    maxHeight: "300px",
    keyboard: true,
    badges: true,
    badgesDismissable: true,
    maxListLength: 0,
    // Text
    textNoneSelected: "Select",
    textMultipleSelected: "%count_selected% selected",
    textNoResults: "No results",
    // Controls
    deselectAll: true,
    selectAll: true,
    showSelected: true,
    // Buttons
    selectButtons: false,
    classBtnDeselectAll : "btn btn-outline-secondary",
    classBtnSelectAll : "btn btn-outline-secondary",
    // HTML
    htmlClear: "Clear search",
    htmlDeselectAll: "Deselect all",
    htmlSelectAll: "Select all",
    htmlBadgeRemove: "[X]",
    // Classes
    classBtnSelect : "btn btn-primary",
    classBadge: "badge badge-dark mr-1",
    classBadgeLink: "text-white",
    classBadgeContainer : "mt-2 mb-3"
  })
});

hideSelect

Default: true

Hide the <select> element. This is expected. However, you may wish to unhide the <select> element for testing.

search

Default: true

Convert the dropdown button to an input-group with a search form control.

maxHeight

Default: "300px"

Set a max height on the dropdown, making it scrollable. This can be disabled by setting to false.

keyboard

Default: true

Enable keyboard navigation. While the search control is focused, cursor keys/the enter key can be used to select options.

badges

Default: true
Conditions: Multiselect elements only.

Display badges below the element that represent selected options.

badgesDismissable

Default: true
Conditions: badges is true.
Multiselect elements only.

Badges can be dismissed to deselect options.

maxListLength

Default: 0

Set button text to a list of comma separated selected values. If the number of selected options exceeds this limit, the value of textMultipleSelected will be displayed.

The default of 0 disables this feature.

textNoneSelected

Default: "None selected"
Conditions: Multiselect elements only.

Dropdown button text when no items are selected.

textMultipleSelected

Default: "%count_selected% selected"
Conditions: Multiselect elements only.

Dropdown button text when multiple items are selected and maxListLength is exceeded.

The %count_selected% keyword is available to display the number of selected items.

textNoResults

Default: "No results"
Conditions: search is true.

This text appears when a search yields no results.

deselectAll

Default: true
Conditions: Multiselect elements only.

Include a deselect all option in the dropdown menu.

Alternatively, if selectButtons is true, a deselect all button will be included in the input group.

selectAll

Default: true
Conditions: Multiselect elements only.

Include a select all option in the dropdown menu.

Alternatively, if selectButtons is true, a select all button will be included in the input group.

selectButtons

Default: false
Conditions: Multiselect elements only.

Include 'deselect all' and 'select all' controls as buttons within the input group rather than as dropdown menu items.

classBtnDeselectAll

Default: "btn btn-outline-secondary"
Conditions: Multiselect elements only.
selectButtons is true.

The class applied to the deselect all button.

classBtnSelectAll

Default: "btn btn-outline-secondary"
Conditions: Multiselect elements only.
selectButtons is true.

The class applied to the select all button.

Include your own text/HTML values for:

The deselect all button.
The select all button.
The dismiss/deselect link within badges.

The example below use SVG sprite icons from Ionicons sprite by rastasheep who created sprites from ionicons, the premium icon font for Ionic Framework.

Select one or more of your favourite foods

<div class="form-group">
  <label for="demo_options_html">Select one or more of your favourite foods</label>
  <select id="demo_overview_example" class="form-control" multiple>
    <!-- options -->
  </select>
</div>

<script>
  $(document).ready(function(){
    $("select#demo_options_html").selectDropdown({
      '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>',
      'htmlBadgeRemove': '<svg class="ion"><use xlink:href="#ion-close"></use></svg>'
    });
  });
</script>

htmlClear

Default: "Clear search"
Conditions: search is true.
Multiselect elements only.

htmlDeselectAll

Default: "Deselect all"
Conditions: search is true.
deselectAll is true.
Multiselect elements only.

htmlSelectAll

Default: "Select all"
Conditions: search is true.
selectAll is true.

htmlBadgeRemove

Default: "[x]"
Conditions: badges is true.
Multiselect elements only.

classBtnSelect

Default: "btn btn-primary"

The class applied to the dropdown button.

classBadge

Default: "badge badge-dark mr-1"
Conditions: badges is true.
Multiselect elements only.

The class applied to badges.

classBadgeContainer

Default: "mt-2 mb-3"
Conditions: badges is true.
Multiselect elements only.

The class applied to the badge container.

Bootstrap Select Dropdown for Bootstrap 4

Options