If you want to add multi selection feature in your default list box so that your user can able to select multiple options in dropdown select box. then In this post I am going to share simple bootstrap 4 based plugin which enable multi-selection feature in your default HTML select box.
There are many multiselect plugins in market but this is really simple, small since reuses maximum of bootrap 4 styles and code. It also follows Bootstrap 4 conventions and use the same instruments (babel, rollup) so pretend to be a boilerplate.
Integrate Multiselect plugin on Bootstrap 4 Website
Libraries
Include all the required bootstrap 4 libraries and then add plugin library BsMultiSelect.min.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/materia/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">script> <script src="BsMultiSelect.min.js">script> |
HTML
Create simple HTML select box where we need to integrate this plugin and allow multi selection.
Inspite of this the plugin utilize dropdown-menu and show styles. Menu items contains BS4 Custom checkboxes.
> |
JS
Now call the plugin on select box and it’ll convert your default select box into multi selection list box.
$(function(){ $("#example").dashboardCodeBsMultiSelect(); }); |
You can use following options to customize your multi selection box
$("#example").dashboardCodeBsMultiSelect({ items: [], // an array of items for dynamic rendering defaults: [], selectedPanelMinHeight: "calc(2.25rem + 2px)", selectedPanelReadonlyBackgroundColor: "#e9ecef", selectedPanelValidBoxShadow: " 0 0 0 0.2rem rgba(40, 167, 69, 0.25)", selectedPanelInvalidBoxShadow: "0 0 0 0.2rem rgba(220, 53, 69, 0.25)", filterInputColor: "#495057", containerClass: "dashboardcode-bsmultiselect", dropDown<a href="https://www.jqueryscript.net/menu/">Menua>Class: "dropdown-menu", dropDownItemClass: "px-2", selectedPanelClass: "form-control btn border", selectedPanelStyle: { "min-height": "calc(2.25rem + 2px)" }, selectedPanelStyleSys: { "cursor": "text", "display": "flex", "flex-wrap": "wrap", "align-items": "center", "margin-bottom": "0px" }, selectedPanelReadonlyStyle: { "background-color": "#e9ecef" }, selectedItemClass: "badge", selectedItemStyle: { "padding-left": "0px" }, selectedItemStyleSys: { "display": "flex", "align-items": "center" }, removeSelectedItemButtonClass: "close", removeSelectedItemButtonStyle: { "font-size": "100%" }, filterInputItemClass: "", filterInputItemStyle: {}, filterInputItemStyleSys: { "display": "block" }, filterInputClass: "", filterInputStyle: { "color": "#495057" }, filterInputStyleSys: { "width": "2ch", "border": "0", "padding": "0", "outline": "none" } }); |
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.