Easy-to-Use Multi-Selection Plugin for Bootstrap 5/4

BsMultiSelect follows Bootstrap 4 conventions and uses the same tools (babel, sass, and rollup) so pretends to represent the modern plugin for the BS team. Supports all features of Bootstrap component: pre/append buttons, custom validation, and form validation.

BsMultiSelect handles click events friendly to your modals and popups. Important: for mouse events preventDefault, stopPropagation were not used (so your other controls always will get ‘clicks’ on them).

BsMultiSelect removes its DOM elements (in ‘option was deselected initiated by the click on “x” button scenario) using setTimeout(..,0) – this simplifies the identification of the click event’s target during the bubbling (because the element is not removing in click event loop iteration you always are able to identify that click’s target belongs to BsMultiselect – and skip processing – most probably cancel popup close handler);

Must Read: A jQuery Plugin To Multi-Selection Function | DualSelectList

Multi-Selection Plugin for Bootstrap 5 Details

Post Name	Bsmultiselect Plugin
Author Name	DashboardCode
Category	Bootstrap, Codepen, Form Plugins
Official Page	Click Here
Official Website	github.com
Publish Date	May 27, 2021
Last Update	July 7, 2023
Download	Link Below
License	MIT

For keyboard events preventDefault was used to a) handle tab (9) as autocomplete b) arrows (38, 40) to prevent the browser from still them; c) enter (13) to prevent default button action (submit etc.) d) ESC (27) to avoid “clear text on esc“functionality duplication.

Manipulations with SELECT > OPTION

When the data source is select the element then when the user makes a selection the options selected the attribute is not removed or added, only HTMLOptionElement.selected value is setup (this automatically doesn’t add\remove selected attribute). If it is not enough and you need to add/remove an attribute, then you can override setSelected in the configuration (note: but this breaks HTML Form reset functionality in Chrome).

Dynamic Updates

Inspite plugin subscribes to forms reset event listener, there are no MutationObserver defined inside (BsMultiSelect does not track properties on original SELECT, or js object data, on parent FIELDSET element, or presence of .was-validated on the parent, or the presence of is-valid, is-invalid original select or substitutional configuration methods.

If you change original select‘s appearance after BsMultiSelecte was created then you will need to push changes to components with corresponding methods UpdateIsValid, UpdateDisabled, UpdateSize, UpdateWasValidated, UpdateValidy. Or All together with UpdateAppearance.

If you change options/items properties (text, selected, disabled, hidden) or if you delete them or insert new items you need to push changes to components with UpdateData. There is specific UpdateOptionsSelected method synchronizes only selected states of options, UpdateOptionsDisabled to synchronize only disabled states of options, UpdateOptionsHidden for hidden.

Update the method works like “update all”: it calls UpdateAppearance and UpdateData.

Features:

RTL support
Allows execution as an ES module (does not require jQuery)
Model validation
Direct filter
Licensed under APACHE 2

Must Read: A Multi-selection Dropdown Plugin In Vanilla Javascript | sellect.js

How to make use of it:

1. Add a jQuery library and Bootstrap 5 (or Bootstrap 4) framework installed.

<!-- Stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">

<!-- jQuery & Bootstrap -->
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.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. the function dashboardCodeBsMultiSelect on the multi-select checklist and the plugin.

<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. 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
});

5. 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'
    }
  }
});