Bootstrap multiselect dropdown not opening in Bootstrap v5

[maniisinproblem]

I am using bootstrap v5 but dropdown is not opening.

[maniisinproblem]

other simple dropdown are working but multiselect is not opening

[andyg2]

Try this

$(".multi-select").multiselect({
      // Bootstrap 5 compatibility
      templates: {
        button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
      },
});

[maniisinproblem]

I am having this code it is not working @andyg2

[andyg2]

Try this

<script type="text/javascript">
$(document).ready(function () { 
  $("#multiple-checkboxes").multiselect({
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    }, 
  }); 
}); 
</script>

[maniisinproblem]

I tried the same @andyg2 still not working, the class open is not coming at .btn-group div. The issue is that, Do you know some way we can add that class manually? I am a designer and finding it difficult to add the class on run time created div.

[andyg2]

finding it difficult to add the class on run time created div

The only classes that change on the button is "show"

closed multiselect dropdown-toggle btn btn-primary btn-default opened multiselect dropdown-toggle btn btn-primary btn-default show

Maybe you could edit this pen to demonstrate the issue.

https://codepen.io/andyg2/pen/ZEvNMzw

[maniisinproblem]

@andyg2 Hi, checkout this codepen [https://codepen.io/manisingh_24/pen/popXRmV] It shows exactly the problem I am facing with multi select.

[maniisinproblem]

https://codepen.io/manisingh_24/pen/popXRmV

[andyg2]

https://codepen.io/manisingh_24/pen/popXRmV

I've edited your codepen to add the bootstrap compatibility - it's working

https://codepen.io/andyg2/pen/rNpEyaP

[maniisinproblem]

It is still not working.

[maniisinproblem]

I am using all cdn provided by you and script code which you have provided. @andyg2

[andyg2]

I am using all cdn provided by you and script code which you have provided. @andyg2

<select id="multiple-checkboxes"> is not in your screenshots.

You're running multi-select on document ready, document ready happens only once when the page first loads. Perhaps the #multiple-checkboxes ID does not exist when document ready occurs.

I recommend creating a code pen which does demonstrate the problem.

[oioix]

This problem occurs since bs5 has changed all bootstrap "data-" attributes to "data-bs-". You can fix this directly in the js (also in the minified version if you like). Just search for the expression data-toggle="dropdown" and simply add data-bs-toggle="dropdown" inside the button tag. By adding this you can use it with both bootstrap 4 and 5.

If you don't need compatibility with bs4 and only want to use it with bootstrap 5 you can alternatively just replace data-toggle="dropdown" with the data-bs-toggle="dropdown" instead of adding it.

Note: This solution does not fix the ugly system button-style that occurs with bs5!

To fix the ugly system button style you need to also add "form-select" to the tag <button type="button" class="multiselect dropdown-toggle" ... in the js-code.

Full example with both changes: Before change: <button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown">

Afterwards: <button type="button" class="form-select multiselect dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">

[Taikono-Himazin]

Are there any plans to support bootstrap5?

[andyg2]

Are there any plans to support bootstrap5?

It works with a template directive

Vanilla

document.addEventListener('DOMContentLoaded', function() {
  var checkboxes = document.getElementById('multiple-checkboxes');

  $(checkboxes).multiselect({
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    }
  });
});

jQuery

$(document).ready(function () { 
  $("#multiple-checkboxes").multiselect({
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
    }, 
  }); 
});