User-friendly Multi Select Plugin For Bootstrap 4 - BsMultiSelect

User-friendly Multi Select Plugin For Bootstrap 4 - BsMultiSelect
File Size: 234 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another multi-select plugin for Bootstrap 4 framework that converts a multi-select list into an easy to use dropdown with checkboxes.

You users are able to select one or more options from the dropdown list by clicking the checkboxes. To clear the selection, just click the x icon inside the selected options just like the tags input.

How to use it:

1. To use the plugin, make sure you have jQuery library and Bootstrap 4 framework installed.

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<!-- jQuery & Bootstrap -->
<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>

2. Load the jQuery BsMultiSelect plugin's script after jQuery.

<script src="dist/js/BsMultiSelect.js"></script>

3. Just call the function dashboardCodeBsMultiSelect on the multi select list and the plugin will do the rest.

<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>
  ...
</select>
$(function(){

  $("select").dashboardCodeBsMultiSelect();

});

4. All default options to customize the plugin.

$("select").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",
  dropDownMenuClass: "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"
  }
});

Change log:

2018-05-23

  • v0.1.3: code adjusted by eslint; fixed bug with visible menu selector

2018-05-21

  • v0.1.0

This awesome jQuery plugin is developed by DashboardCode. For more Advanced Usages, please check the demo page or visit the official website.