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!

Cynical

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...

Rhinal

When I am trying to populate this select using Jquery. Select is not populating need help. @stannars jose – Nariko

Did you get it? I will get back soon @Yahya Hussaini – Rhinal

I got it work, fairly easy. However, I am struggling with a layout problem: the select dropdown is pushed on a new line, it won't respect the input-group class of the containing div, with or without the form-select class. – Pulvinus

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>',
            }
          });
        });

Carnotite

do you have an example of this working with default bootstrap 5 ? Can it be used without adding anything other than the script above? – Caprifig

Answer 3

My solution was to use:

• class="input-group"
• a huge button
• a list of type="checkbox" inputs (a menu)

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="input-group mb-3 bg-white rounded">
  <button class="btn btn-outline-secondary w-100 dropdown-toggle" data-bs-auto-close="outside" type="button" data-bs-toggle="dropdown" aria-expanded="false">Words</button>
  <ul class="dropdown-menu w-100">

    <li>
      <input class="form-check-input" type="checkbox" value="1" id="myLove" checked name="selected_assets" checked disabled>
      <label class="form-check-label" for="myLove">
                            Great
                        </label>
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="2" id="myLove2" name="selected_assets">
      <label class="form-check-label" for="myLove2">
                            solution
                        </label>
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="3" id="myLove3" checked name="selected_assets">
      <label class="form-check-label" for="myLove3">
                            but...
                        </label>
    </li>
    <li>
      <input class="form-check-input" type="checkbox" value="4" id="myLove4" name="selected_assets">
      <label class="form-check-label" for="myLove4">
                            what?
                        </label>
    </li>

    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a>how 2 limit @ n selections max?</a></li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

Edited:

• added data-bs-auto-close="outside" so menu doesn't close after every click as in Avoid dropdown menu close on click inside which incidentally also detailed my exact solution.
• added labels for a larger touch area
• deleted unnecessary ul class attribute

Decimalize

Answer 4

Use form-select instead of selectpicker.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<select class="form-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Preussen

For doing multiple selections you need to add the 'multiple' attribute, see getbootstrap.com/docs/5.0/forms/select – Hardworking

It does not give a feel of dropdown, more like listbox. By default its always open. It should be open upon selection only – Cirrhosis