August 14, 2022

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

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

bootstrap multiselect, bootstrap 4 multiselect dropdown, bootstrap multiselect dropdown with search, bootstrap 4 multiselect dropdown with checkbox select all

More features:

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

How to make use of it:

1. To use the plugin, be sure you have 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. Just name the function dashboardCodeBsMultiSelect on the multi-select checklist and the plugin will do the remaining.

<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 even outline the choices within 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 choices 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 in a position to style the plugin utilizing your personal 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 adjustments on the element with the next API strategies.

$('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");

User-friendly Multi-Select Plugin, DashboardCode Multiselect plugin/Github, bootstrap multiselect listbox, bootstrap 4 multiselect dropdown with checkbox


See Demo And Download

Official Website(DashboardCode): Click Here

This superior jQuery/javascript plugin is developed by DashboardCode. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.