Quick Integrate Multiselect plugin on Bootstrap 4 Website

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.
Bootstrap4 Multiselect Plugin
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

<!--CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/materia/bootstrap.min.css">
 
<!--JS-->
 <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.

<select name="states" id="example" class="form-control"  multiple="multiple" style="display: none;">
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                            <option value="AZ">Arizona</option>
                            <option value="AR">Arkansas</option>
                            <option selected value="CA">California</option>
                            <option value="CO">Colorado</option>
                            <option value="CT">Connecticut</option>
</select>

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/">Menu</a>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.

DEMO | DOWNLOAD

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.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.