Bootstrap 5 select dropdown with the multiple attribute collapsed

Question

I am trying to use the select element with the 'multiple' attribute, but I want it to be collapsed until the user clicks on it. The problem is that bootstrap 5 no longer supports the multiselect that was used in Bootstrap 4 and older. There used to be a CSS class called "selectpicker" that was used in these dropdowns to select multiple of the options. Does anyone have a solution to this? Really all I want is the select menu to be a dropdown that opens and closes, and isn't just open all of the time. Thank you!

Answer 1

Bootstrap 5 support is currently being worked on, Hence not working. You are trying to make use of bootstrap-select (refer)-> https://developer.snapappointments.com/bootstrap-select/

The issue raised can be found at -> https://github.com/snapappointments/bootstrap-select/issues/2505

However it can be used if the following criteria are met using a beta version of the bootstrap-select as suggested in the GitHub issues they are:

"bootstrap": "^5.0.0-beta3",
"bootstrap-select": "^1.14.0-beta2"

simply put the bootstrap version must be 5.0.0-beta3 or above and bootstrap-select version 1.14.0-beta2 or above

You can find the beta of bootstrap-select here -> https://github.com/snapappointments/bootstrap-select/releases/tag/v1.14.0-beta2

as for cdn -> https://cdnjs.com/libraries/bootstrap-select/1.14.0-beta2

I have it working with BS 5.0.1 Please find the code below

//dont forget to add jquery also or it doesnt work
//below code is to initialize only specific selects-> refer bs-select docs and 
//options, if selectpicker class is added no need to intialize like below so its 
//commented, use as per your requirement
//$('select').selectpicker();

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" integrity="sha512-mR/b5Y7FRsKqrYZou7uysnOdCIJib/7r5QeJMFvLNHNhtye3xJp1TdJVPLtetkukFn227nKpXD9OjUc09lx97Q==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />


<div class="container mt-5">
  <select class="selectpicker" multiple aria-label="size 3 select example">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Also note that class form-select of BS5 is not added since it adds unwanted css styles to the select - feel free to try it though

Hope it works for you...

Answer 2

Bootstrap multiselect workaround with bootstrap v5.1

$(document).ready(function () {
          $('#example-getting-started').multiselect({
            buttonClass: 'form-select',
            templates: {
              button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
            }
          });
        });