Convert <select> elements to Bootstrap 4 dropdowns for increased flexibility.
Get started quickly by using CDNs/hosted files. Check Introduction | Bootstrap for the latest versions.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap-select-dropdown.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/bootstrap-select-dropdown.js"></script><div class="form-group">
<select id="demo_select" class="form-control">
<!-- options -->
</select>
</div>
<script>
$(document).ready(function(){
$('#demo_select').selectDropdown();
});
</script><div class="form-group">
<select id="demo_select_optgroups" class="form-control" multiple>
<optgroup label="Group 1">
<!-- options -->
</optgroup>
</select>
</div>
<script>
$(document).ready(function(){
$('#demo_select_optgroups').selectDropdown();
});
</script><div class="form-group">
<select id="demo_multiselect" class="form-control" multiple>
<!-- options -->
</select>
</div>
<script>
$(document).ready(function(){
$('#demo_multiselect').selectDropdown();
});
</script><div class="form-group">
<select id="demo_multiselect_optgroups" class="form-control" multiple>
<optgroup label="Group 1">
<!-- options -->
</optgroup>
</select>
</div>
<script>
$(document).ready(function(){
$('#demo_multiselect_optgroups').selectDropdown();
});
</script>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.
This plugin replaces select elements with Bootstrap dropdowns. As a result, Bootstrap dropdown accessibility considerations apply.
In addition, the aria-labelledby attribute is automatically applied. For each instance of the plugin, a unique aria-labelledby attribute on the dropdown menu is matched with a corresponding id on the dropdown button.
Click handlers are applied such that the removal and addition of option elements are respected.