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.
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"
})
});
true
Hide the <select> element. This is expected. However, you may wish to unhide the <select> element for testing.
true
Convert the dropdown button to an input-group
with a search form control.
"300px"
Set a max height on the dropdown, making it scrollable. This can be disabled by setting to false
.
true
Enable keyboard navigation. While the search control is focused, cursor keys/the enter key can be used to select options.
true
Display badges below the element that represent selected options.
true
badges
is true
.Badges can be dismissed to deselect options.
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.
"None selected"
Dropdown button text when no items are selected.
"%count_selected% selected"
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.
"No results"
search
is true
.
This text appears when a search yields no results.
true
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.
true
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.
false
Include 'deselect all' and 'select all' controls as buttons within the input group rather than as dropdown menu items.
"btn btn-outline-secondary"
selectButtons
is true
.
The class applied to the deselect all button.
"btn btn-outline-secondary"
selectButtons
is true
.
The class applied to the select all button.
Include your own text/HTML values for:
The example below use SVG sprite icons from Ionicons sprite by rastasheep who created sprites from ionicons, the premium icon font for Ionic Framework.
<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>
"Clear search"
search
is true
."Deselect all"
search
is true
.deselectAll
is true
."Select all"
search
is true
.selectAll
is true
."[x]"
badges
is true
."btn btn-primary"
The class applied to the dropdown button.
"badge badge-dark mr-1"
badges
is true
.The class applied to badges.
"mt-2 mb-3"
badges
is true
.The class applied to the badge container.