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);
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.
Must Read: A jQuery Plugin To Multi-Selection Function | DualSelectList
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'
}
}
});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.
