## BsMultiselect

Multiselect Plugin for Bootstrap 5

    dashboardcode.BsMultiSelect("#myElement");
    $("select[multiple='multiple']").bsMultiSelect();

Attach plugin.
Select theme:
Bootswatch Cosmo theme applied: no adjusting is required
Bootswatch Sketchy theme applied; additional adjusting is required:

    // adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
    $multiSelects.bsMultiSelect(
        cssPatch : {
            picks_focus: {boxShadow:"0px 0px 0px 0.2rem rgba(51,51,51,0.25)" , borderColor:"#333"},
            picks_disabled: {backgroundColor: "#f7f7f9"},
            // theme breaks "text-primary bg-light" (used as hover on menu items) so I need to replace them with own styling
            choice_hover: { classes: "" /* remove default "text-primary bg-light" */,  styles: { backgroundColor: "rgb(168, 168, 168)"}},
            // theme suport only "old style" BS4 buttons and ignores BS5 close buttons
            pickButton: {backgroundImage: `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")`}
        }
    );

Bootswatch Materia theme applied; additional adjusting is required.

    // adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
    $multiSelects.bsMultiSelect(
        cssPatch: {
            picks_disabled: {backgroundColor: "transparent", color:"#ddd", borderColor: 'transparent'},
            picks_focus: { boxShadow: 'inset 0 -2px 0 #2196F3'},
            picks_focus_valid: {boxShadow: null},
            picks_focus_invalid: {boxShadow: null},
            picks: { boxShadow: 'inset 0 -1px 0 #ddd'}
            // theme redefines color of close button on modals (so force us to fix it for BSMultiSelect)
            pickButton: {backgroundImage: `url("data:image/svg+xml, <svg> xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")`}
        }
    );

Bootswatch Darkly theme applied; additional adjusting is required.

        // extrimely strange theme for BS5: "input fields" are dark; when disabled are grey.
    // adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
    $multiSelects.bsMultiSelect(
        cssPatch: {
            picks_disabled: {backgroundColor:"rgb(235, 235, 235)"},
            pickButton: {filter: invert(.5)},
            picks_focus: {borderColor: '#739ac2', boxShadow: '0 0 0 0.2rem rgba(55, 90, 127, 0.25)'}
        }
    );

Bootswatch Minty theme applied; additional adjusting is required:

    // adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
    $multiSelects.bsMultiSelect(
        cssPatch: {
            picks_disabled: {backgroundColor: "#f7f7f9", borderColor: '#d0eae2'},
            picks_focus: { borderColor: '#d0eae2', boxShadow: '0 0 0 0.2rem rgba(120,194,173,0.25)'},
            picks_focus_valid: {boxShadow: '0 0 0 0.2rem rgba(86,204,157,0.25)'},
            picks_focus_invalid: {boxShadow: '0 0 0 0.2rem rgba(255,120,81,0.25)'},
            pick: {color: 'black'}
        }
    );

Compare BsMultiSelect with standard input fields. Select size:
Enable Disable

Horizontal Form / Disabled
BsMultiSelect
Input field
BsMultiSelect disabled
Inline Form / Input groups
Input
:-)
BsMultiSelect
:-)

-->

    $('#myDropdown').on('hide.bs.dropdown', function (jqEvent) {
        if (jqEvent.clickEvent) {
            var target = jqEvent.clickEvent.target;
            var container = $('#bsMultiSelectOnDropdown').bsMultiSelect("GetContainer");
            if (container== target || $.contains(container, target))
                return false;
        }
    })

Return to Github