This time I will share jQuery Plugin and tutorial about User-friendly Multi Select Plugin For Bootstrap 4 – BsMultiSelect, hope it will help you in programming stack.
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.
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 4 framework installed.
2 |
<link rel="stylesheet" href="bootstrap.min.css"> |
5 |
<script src="jquery.slim.min.js"></script> |
6 |
<script src="popper.min.js"></script> |
7 |
<script src="bootstrap.min.js"></script> |
2. Load the jQuery BsMultiSelect plugin’s script after jQuery.
1 |
<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.
1 |
<select name="states" id="example" class="form-control" multiple="multiple" style="display: none;"> |
2 |
<option value="AL">Alabama</option> |
3 |
<option value="AK">Alaska</option> |
4 |
<option value="AZ">Arizona</option> |
5 |
<option value="AR">Arkansas</option> |
6 |
<option selected value="CA">California</option> |
3 |
$("select").bsMultiSelect(); |
4. You can also define the options in the JavaScript as follows.
1 |
<div class="container"> |
01 |
$('.container').bsMultiSelect({ |
03 |
{text:"Asia", value:"C0",hidden:false,disabled:false,selected:true}, |
04 |
{text:"Europe",value:"C1",hidden:false,disabled:false,selected:false}, |
05 |
{text:"Australia",value:"C2",hidden:false,disabled:false,selected:false} |
07 |
getDisabled : () => {}, |
08 |
getIsValid : () => {}, |
09 |
getIsInvalid : () => {} |
5. All default options to customize the plugin.
01 |
$("select").bsMultiSelect({ |
03 |
containerClass: "dashboardcode-bsmultiselect", |
07 |
staticContentGenerator: null, |
08 |
getLabelElement: null, |
09 |
pickContentGenerator: null, |
10 |
choiceContentGenerator: null, |
11 |
buildConfiguration: null, |
21 |
valueMissingMessage: '', |
22 |
getIsValueMissing: null |
6. Override the default styles & Bootstrap 4 classes to customize the plugin.
01 |
$("select").bsMultiSelect({ |
07 |
listStyleType: 'none', |
13 |
choice: 'px-md-2 px-1', |
14 |
choice_hover: 'text-primary bg-light', |
22 |
backgroundColor: 'transparent', |
23 |
backgroundImage: 'none' |
26 |
filterInput_empty: 'form-control', |
