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
maxListLength: 4, // Maximum number of <option> text() values to display within the button.
hideSelect: true, // Hide the select element.
multiselectStayOpen: true, // Keep dropdown open on interaction for multiselects.
search: true, // Wrap the dropdown button in an input group with search form controls.
observeDomMutations: false, // Respect dynamic changes to the select options.
maxHeight: "300px", // Make the dropdown scrollable if beyond this height. Set as false to disable.
// Text.
textNoneSelected: "None selected",
textMultipleSelected: "Multiple selected",
textNoResults: "No results",
// HTML.
htmlClear: "Clear search",
// Classes
classDropdown: "dropdown",
classBtnClear: "btn btn-outline-secondary",
classBtnSearch: "btn btn-primary",
classMenu: "dropdown-menu",
classItem: "dropdown-item"
})
});
Default: 4.
For multiselect
elements, limit the number of options to list as comma separated values within the dropdown button elements. If the number of selected options exceeds this limit, the value of textMultipleSelected
will be displayed.
Default: true.
Hide the select
element. This is expected. However, you may wish to unhide the select
element for testing.
Default: true.
For multiselect
elements, keep the dropdown menu open on interaction. Normally, a dropdown menu closes when you select an item. However, for multiselect
, we may wish for the menu to stay open to enable the user to conveniently select other options.
Default: true.
Convert the dropdown button to an input-group
, with a search form control and a clear search button.
Default: false.
Monitor changes to the option list of the select
element, and adjust selectDropdown
behaviour accordingly. This option is disabled by default due to the performance impact.
Default: 300px.
Set a max height on the dropdown, enabling it to be scrollable. This can be disabled by setting the option to false
.
Default: None selected.
This text is set on the dropdown button when the following conditions are met:
select
element is a multiselect
.
This text is set on the dropdown button when the following conditions are met:
select
element is a multiselect
.
maxListLength
selections have been made.
Default: No results.
This text appears when a search yields no results.
Include your own text/HTML value for the clear search button (which appears when search
is true
).
The example below uses an SVG sprite icon from Ionicons sprite by rastasheep who created sprites from ionicons, the premium icon font for Ionic Framework.
$(document).ready(function(){
$("select#demo_select_htmlclear").selectDropdown({
"htmlClear": '<svg class="ion"><use xlink:href="#ion-close-circled"></use></svg>'
});
});
Default: dropdown.
The class applied to the dropdown element. The default is Bootstrap 4 markup.
Default: btn btn-outline-secondary.
The class applied to the dropdown element. The default is a Bootstrap 4 outline button with secondary colors.
Default: btn btn-primary.
The class applied to the dropdown element. The default is a Bootstrap 4 button with primary colors.
Default: dropdown-menu.
The class applied to the dropdown menu element. The default is Bootstrap 4 markup.
Default: dropdown-item.
The class applied to each dropdown item element. The default is Bootstrap 4 markup.