User-friendly Multi Select Plugin For Bootstrap 5/4 - BsMultiSelect

Just another multi-select plugin for Bootstrap 5 (and 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.

More Features:

• RTL support.
• Allows to implement as an ES module (requires no jQuery).
• Form validation.
• Live filter.
• Licensed under APACHE 2.

How to use it:

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

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

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

<!-- For Bootstrap 5 -->
<script src="dist/js/BsMultiSelect.min.js"></script>

<!-- For Bootstrap 4 -->
<script src="dist/js/BsMultiSelect.bs4.min.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").bsMultiSelect();

});

4. You can also define the options in the JavaScript as follows.

<div class="container">
  ...
</div>

$('.container').bsMultiSelect({
  options : [
    {text:"Asia", value:"C0",hidden:false,disabled:false,selected:true},
    {text:"Europe",value:"C1",hidden:false,disabled:false,selected:false},
    {text:"Australia",value:"C2",hidden:false,disabled:false,selected:false}
  ],
  getDisabled : () => {},
  getIsValid : () => {},
  getIsInvalid : () => {}
});

5. All default options to customize the plugin.

$("select").bsMultiSelect({
  useCssPatch: true,
  containerClass: "dashboardcode-bsmultiselect",
  css: css,
  cssPatch: cssPatch,
  placeholder: '',
  staticContentGenerator: null,
  getLabelElement: null,
  pickContentGenerator: null,
  choiceContentGenerator: null,
  buildConfiguration: null,
  isRtl: null,
  setSelected: null,
  required: null,
  optionsAdapter: null,
  options: null,
  getDisabled: null,
  getSize: null,
  getValidity: null,
  labelElement: null,
  valueMissingMessage: '',
  getIsValueMissing: null
});

6. Override the default styles & Bootstrap 4 classes to customize the plugin.

$("select").bsMultiSelect({
  cssPatch: {
    choices: {
      listStyleType: 'none'
    },
    picks: {
      listStyleType: 'none',
      display: 'flex',
      flexWrap: 'wrap',
      height: 'auto',
      marginBottom: '0'
    },
    choice: 'px-md-2 px-1',
    choice_hover: 'text-primary bg-light',
    filterInput: {
      border: '0px',
      height: 'auto',
      boxShadow: 'none',
      padding: '0',
      margin: '0',
      outline: 'none',
      backgroundColor: 'transparent',
      backgroundImage: 'none' // otherwise BS .was-validated set its image

    },
    filterInput_empty: 'form-control',
    // need for placeholder, TODO test form-control-plaintext
    // used in staticContentGenerator
    picks_disabled: {
      backgroundColor: '#e9ecef'
    },
    picks_focus: {
      borderColor: '#80bdff',
      boxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)'
    },
    picks_focus_valid: {
      borderColor: '',
      boxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)'
    },
    picks_focus_invalid: {
      borderColor: '',
      boxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)'
    },
    // used in BsAppearance
    picks_def: {
      minHeight: 'calc(2.25rem + 2px)'
    },
    picks_lg: {
      minHeight: 'calc(2.875rem + 2px)'
    },
    picks_sm: {
      minHeight: 'calc(1.8125rem + 2px)'
    },
    // used in pickContentGenerator
    pick: {
      paddingLeft: '0px',
      lineHeight: '1.5em'
    },
    pickButton: {
      fontSize: '1.5em',
      lineHeight: '.9em',
      float: "none"
    },
    pickContent_disabled: {
      opacity: '.65'
    },
    // used in choiceContentGenerator
    choiceContent: {
      justifyContent: 'initial'
    },
    // BS problem: without this on inline form menu items justified center
    choiceLabel: {
      color: 'inherit'
    },
    // otherwise BS .was-validated set its color
    choiceCheckBox: {
      color: 'inherit'
    },
    choiceLabel_disabled: {
      opacity: '.65'
    }
  }
});

7. You're able to style the plugin using your own CSS without Bootstrap 4.

$("select").bsMultiSelect({
  useCssPatch: false,
  css: {
    choices: 'dropdown-menu',
    // bs4, in bsmultiselect.scss as ul.dropdown-menu
    choice_hover: 'hover',
    //  not bs4, in scss as 'ul.dropdown-menu li.hover'
    choice_selected: '',
    choice_disabled: '',
    picks: 'form-control',
    // bs4, in scss 'ul.form-control'
    picks_focus: 'focus',
    // not bs4, in scss 'ul.form-control.focus'
    picks_disabled: 'disabled',
    //  not bs4, in scss 'ul.form-control.disabled'
    pick_disabled: '',
    pickFilter: '',
    filterInput: '',
    // used in BsPickContentStylingCorrector
    pick: 'badge',
    // bs4
    pickContent: '',
    pickContent_disabled: 'disabled',
    // not bs4, in scss 'ul.form-control li span.disabled'
    pickButton: 'close',
    // bs4
    // used in BsChoiceContentStylingCorrector
    // choice:  'dropdown-item', // it seems like hover should be managed manually since there should be keyboard support
    choiceCheckBox_disabled: 'disabled',
    //  not bs4, in scss as 'ul.form-control li .custom-control-input.disabled ~ .custom-control-label'
    choiceContent: 'custom-control custom-checkbox d-flex',
    // bs4 d-flex required for rtl to align items
    choiceCheckBox: 'custom-control-input',
    // bs4
    choiceLabel: 'custom-control-label justify-content-start',
    choiceLabel_disabled: ''
  }
});

8. Implement it as an ES module.

import Popper from "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.js"
import {BsMultiSelect} from "./dist/js/BsMultiSelect.esm.min.js"
var mySelect = document.querySelector('#select-id');
var environment = {window, Popper};
bsMultiSelect = BsMultiSelect(mySelect, environment, {
  // settings here
});

9. Update changes on the component with the following API methods.

$('select').bsMultiSelect("UpdateIsValid");
$('select').bsMultiSelect("UpdateDisabled");
$('select').bsMultiSelect("UpdateSize");
$('select').bsMultiSelect("UpdateWasValidated");
$('select').bsMultiSelect("UpdateValidy");
$('select').bsMultiSelect("UpdateOptionsSelected", index);
$('select').bsMultiSelect("UpdateOptionDisabled", index);
$('select').bsMultiSelect("UpdateOptionHidden", index);
// or all-in-one
$('select').bsMultiSelect("UpdateAppearance");
$('select').bsMultiSelect("UpdateData");

Changelog:

v2.0.0beta28 (2021-12-19)

• Update

v2.0.0beta27 (2021-12-08)

• Update

v2.0.0beta26 (2021-12-05)

• Update NPM package.

v2.0.0beta25 (2021-12-01)

• Update NPM package.
• Bootstrap 4 version updated

v1.1.18 (2021-09-06)

• Bugfix

v1.1.17 (2021-09-02)

• Bugfix

v1.1.16 (2021-08-25)

• CSS update

v1.1.15 (2021-07-04)

• optimizations

v1.1.14 (2021-07-04)

• scrollIntoView improved

v1.1.13 (2021-06-29)

• scrollIntoView for ChoicesDynamicStylingPlugin

v1.1.13 (2021-06-28)

• scrollIntoView for ChoicesDynamicStylingPlugin

v1.1.12 (2021-06-26)

• Bugfixes.

v1.1.11 (2021-06-25)

• Bugfixes.

v1.1.8 (2021-06-24)

• HighlightPlugin, CustomChoiceStylingPlugin, CustomPickStylingPlugin

v1.1.7 (2021-06-20)

• ChoicesDynamicStylingPlugin

v1.1.6 (2021-06-17)

• Bugfix
• Improved 'no result' message.

v1.1.1 (2021-06-08)

• IE11 set placeholder problem solved

v1.1.0 (2021-06-08)

• breaking change in DOM generation

v1.0.4 (2021-06-05)

• breaking change in DOM generation: previous dropdown ul become wrapped to div

v1.0.3 (2021-06-04)

• problem with padding between picks in rtl solved

v1.0.1/2 (2021-06-03)

• UMD bundle without jquery support
• Floating labels (Bootstrap 5 version)

v1.0.0 (2021-05-27)

• Supports Bootstrap 5

v0.6.27 (2020-08-19)

• updated

v0.6.27 (2020-08-05)

• restore compatability with old code

v0.6.25 (2020-07-02)

• optimizations

v0.6.23 (2020-06-27)

• optimization

v0.6.22 (2020-06-26)

• Bugfixed

v0.6.21 (2020-06-25)

• Bugfixed

v0.6.20 (2020-06-24)

• Optimization.

v0.6.19 (2020-06-23)

• Optimization.

v0.6.18 (2020-06-22)

• Bugfix

v0.6.15 (2020-06-20)

• Optimized layout api

v0.6.14 (2020-06-19)

• FilterAspect redesign

v0.6.13 (2020-06-18)

• Layout redesign

v0.6.12 (2020-06-17)

• API changes

v0.6.11 (2020-06-16)

• Bugfix

v0.6.10 (2020-06-15)

• Bugfix

v0.6.9 (2020-06-13)

• Optimized

v0.6.8 (2020-06-13)

• Optimized API

v0.6.7 (2020-06-11)

• Bugfix

v0.6.5 (2020-06-11)

• Optimized.

v0.6.4 (2020-06-10)

• Optimized.

v0.6.3 (2020-06-09)

• Fixed ReferenceError: adjustLegacySettings is not defined

v0.6.2 (2020-06-08)

• Updated API

v0.6.0 (2020-06-02)

• changed API names

v0.5.68 (2020-06-01)

• optimizations

v0.5.67 (2020-05-31)

• optimizations

v0.5.66 (2020-05-30)

• optimizations

v0.5.65 (2020-05-29)

• Fixed IE11 flex start.

v0.5.64 (2020-05-29)

• optimizations

v0.5.62 (2020-05-20)

• optimizations

v0.5.61 (2020-05-19)

• Bug fixed

v0.5.60 (2020-05-18)

• Bug fixed

v0.5.59 (2020-05-17)

• Bug fixed

v0.5.58 (2020-05-05)

• FormRestoreOnBackwardPlugin

v0.5.57 (2020-05-05)

• optimizations

v0.5.56 (2020-05-04)

• added Placeholder plugin

v0.5.55 (2020-05-01)

• optimizations

v0.5.53 (2020-04-30)

• optimizations

v0.5.52 (2020-04-29)

• optimizations

v0.5.51 (2020-04-28)

• optimizations

v0.5.50 (2020-04-26)

• plugin api available for BsMultiSelect esm module

v0.5.49 (2020-04-25)

• Added preventOverflow option to popover.

v0.5.48 (2020-04-24)

• API changed

v0.5.47 (2020-04-22)

• Bugfix

v0.5.46 (2020-04-21)

• API changed.

v0.5.45 (2020-04-19)

• Improvement

v0.5.44 (2020-04-18)

• alignToFilterInputItemLocation optimized

v0.5.43 (2020-04-17)

• Fixed flex start on IE11.

v0.5.42 (2020-04-16)

• optimizations

v0.5.41 (2020-04-15)

• Changed API - UpdateOptionHidden
• Bugfixed

v0.5.40 (2020-03-18)

• Optimization.

v0.5.39 (2020-03-17)

• Better User Experience.

v0.5.38 (2020-03-16)

• Bug fixed

v0.5.37 (2020-03-15)

• Methods updated

v0.5.36 (2020-03-12)

• Added UpdateOptionInserted method

v0.5.35 (2020-03-11)

• optimizations

v0.5.34 (2020-03-10)

• optimizations

v0.5.33 (2020-03-09)

• optimizations

v0.5.32 (2020-03-08)

• Added new method UpdateOptionsDisabled
• Renamed UpdateSelected to UpdateOptionsSelected

v0.5.31 (2020-03-07)

• Bugfixed

v0.5.30 (2020-03-06)

• Fixed memory leak bug

v0.5.29 (2020-03-05)

• Press Enter in the input will open the dropdown

v0.5.28 (2020-03-04)

• Optimized for filter

v0.5.27 (2020-03-03)

• Fixed full match issue

v0.5.26 (2020-03-02)

• optimizations

v0.5.25 (2020-03-01)

• optimizations

v0.5.24 (2020-02-29)

• added UpdateSelected API

v0.5.23 (2020-02-28)

• configs optimized

v0.5.22 (2020-02-27)

• optimizations

v0.5.21 (2020-02-26)

• Styling update

v0.5.20 (2020-02-25)

• Bugfix

v0.5.19 (2020-02-24)

• optimizations

v0.5.18 (2020-02-24)

• API updated

v0.5.16 (2020-02-22)

• Optimization

v0.5.15 (2020-02-21)

• setSelected will not remove selected attribute

v0.5.14 (2020-02-20)

• new method UpdateAppearance

v0.5.13 (2020-02-19)

• BsMultiSelect jQuery prototype can create instance (was only return)

v0.5.12 (2020-02-18)

• Bugfix

v0.5.11 (2020-02-17)

• Added GetChoices() method that returns 'dropdown' menu

v0.5.10 (2020-02-12)

• ES6 module

v0.5.9 (2020-02-12)

• optimizations

v0.5.8 (2020-02-10)

• optimizations

v0.5.6/7 (2020-02-09)

• optimizations

v0.5.5 (2020-02-08)

• Fixed the styling of dropdown

v0.5.4 (2020-02-06)

• configuring css/cssPatch, assuming null/undefined value to styles property - the property will be removed from default styles dictionary

v0.5.3 (2020-02-06)

• justification in dropdown menu for inline form solved

v0.5.2 (2020-02-05)

• Bugs fixed

v0.5.0 (2020-02-04)

• updated

v0.4.34beta (2020-01-24)

• normalized options
• mem leak solved
• rtl support

v0.4.33 (2019-12-21)

• better suport of group-input

v0.4.32 (2019-12-20)

• getSize, getDisabled, getIsValid, getIsInValid (actual for js-object initiated) are available to setup from configuration

v0.4.31 (2019-12-20)

• Better padding for sm lg sizes

v0.4.30 (2019-12-19)

• configuration.setSelected as hook for pre and post selection events

v0.4.29 (2019-12-17)

• supports form-control-lg/sm
• supports input-group-lg and input-group-sm (on container)

v0.4.27 (2019-12-17)

• better look on phone devices

v0.4.26 (2019-12-16)

• fixed placeholder issues.

v0.4.20 (2019-12-14)

• placeholder on IE11 looks better

v0.4.19 (2019-12-14)

• Added placeholder support

v0.4.18 (2019-12-13)

• "no flick" dom elements instantioning in html;  bootstrap prepend, append; select all and deselect all methods

v0.4.17 (2019-12-11)

• Supports fieldset

v0.4.10/11/12 (2019-12-08)

• form reset support
• removed console output
• now "GetContainer" returns container div
• fixed bugs

v0.4.10/11/12 (2019-12-07)

• uncheck selected error has been solved
• esc first close the dropdown then modal

v0.4.9 (2019-12-06)

• small optimizations & bug fix

v0.4.6 (2019-12-03)

• Bugfix

v0.4.5 (2019-11-28)

• ESC keydown now processed with preventDefault (to do not duplicate clear text custom functionality)

v0.4.4 (2019-11-27)

• click inside selected panel doesn't clear the filter input (we have bootrap x for this and ESC button)

v0.4.3 (2019-11-26)

• Fixed: "two dropdown items can be hovered for a moment" (one by mouse second from keyboard)

v0.4.2 (2019-11-13)

• configuration API changed; "selected" happens when full text entered

v0.4.1 (2019-11-01)

• added "buildConfiguration" method

v0.4.0 (2019-10-25)

• added "buildConfiguration" method
• id generation for label-input was redesigned once more time (now id is used first, if id is absent then name is used)
• checkbox without ids from now (js events are used to reference label and checbox, not "for-id" functionality).

v0.3.0 (2019-10-21)

• configuration object is now named "configuration" (was options)
• id generation - new ids (btw, id generation can be customized assigning configuration.createCheckBoxId and configuration.createInputId methods)

v0.2.24 (2019-07-28)

• adding (hardcoded) css foat:none to "cancel" button span (x)  because BS team have added float:rigth to it (why?) in one of newest BS versions; this was the reason that sometimes badge's "x" button moved to new line separately.

v0.2.23 (2019-07-27)

• support bsMultiSelect on dropdown: click to remove/unselect the item is now processed in setTimout(..,0) this helps filter out close clicks in dropdown's hide event handler (investigate that clicks target was bsMultiSelect and ignore it)

v0.2.22 (2019-04-12)

• better UX, when only one left in aotosuggestion list - tab and enter select it

2018-10-11

• height initial -> auto since IE11 doesn't support initial (and node updates)

2018-07-25

• support BS 4.1.3 fixed height form-control

2018-06-25

• fix "can select disable"

2018-06-23

• v0.2.9: Bugfix

2018-06-22

• v0.2.7

2018-06-20

• Bugfix

2018-06-13

• renamed readonly to disabled

2018-06-11

• dispose for label click return last for value

2018-06-06

• fixe auto close after selection
• fix options bug

2018-06-05

• trigger change on original select

2018-06-02

• dynamic disabled support

2018-05-31

• adoptFilterInputLength in clearFilterInput

2018-05-24

• adoptFilterInputLength in clearFilterInput

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.