Collapsed Bootstrap 5 select drop-down featuring the multiple attribute

I am facing a challenge with using the select element along with the 'multiple' attribute. My aim is to have it collapsed by default and expand only when the user clicks on it. Unfortunately, Bootstrap 5 no longer supports the multiselect feature available in its previous versions like Bootstrap 4. In the past, a CSS class known as "selectpicker" was utilized to enable multiple selections in dropdowns. Does anyone know of a workaround for this issue? Simply put, I want the select menu to function as a dropdown that can be opened and closed, rather than being constantly open. Your help is greatly appreciated!

jquerycssbootstrap-5bootstrap-selectbootstrap-selectpicker

Answer №1

Currently in progress: Support for Bootstrap 5 is still in development, so it's not yet functional. Attempting to utilize bootstrap-select (refer) ->

You can find the related issue here -> https://github.com/snapappointments/bootstrap-select/issues/2505

However, you can make it work by meeting specific criteria using a beta version of bootstrap-select as indicated in the GitHub issues:

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

To clarify, the bootstrap version should be 5.0.0-beta3 or higher and the bootstrap-select version should be 1.14.0-beta2 or above.

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

For CDN usage ->

I have successfully implemented it with BS 5.0.1 Below is the code snippet:

// don't forget to include jQuery as well, or it won't work
// the below code is for initializing specific selects - refer to bs-select docs and 
// options; if 'selectpicker' class is added, there's no need to initialize like below, so it's 
// commented out; use according to your needs
//$('select').selectpicker();
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f011f00">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a4958681d06180619">[email protected]</a>/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>

Note: The class "form-select" from BS5 has been excluded due to unnecessary CSS styles being applied to the select element - however, feel free to test it yourself.

Hopefully this solution works for you...

Answer №2

A workaround for using Bootstrap multiselect with Bootstrap version 5.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>',
            }
          });
        });

Answer №3

Here is how I tackled the issue:

  • class="input-group"
  • a big button
  • a series of type="checkbox" inputs (acting as a menu)

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f021f01">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4b9a4ba">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

Revisions Made:

  • included 
    data-bs-auto-close="outside"
    to prevent the menu from closing after each click, similar to the concept discussed in Avoid dropdown menu close on click inside, which coincidentally aligned with my approach.
  • added labels for improved touch area
  • removed unnecessary ul class attribute

Answer №4

It is recommended to use form-select instead of selectpicker.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219061904">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279667964">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically updating d3.js data in real-time using jQuery's setInterval function with support for JSON, XML, text, and other data

Is there anyone who can provide guidance on how to use jQuery's get method (for json, txt, xml, or any other format) in conjunction with setInterval from d3.js? I'm looking to update my d3 bar chart every N seconds. Alternatively, is there an exi ...

jqueryd3.js

The completion action is never carried out

I am currently facing an issue with one of my JavaScript functions. I have several $.ajax calls throughout my webpage followed by .done(), and they all seem to be functioning properly, except for one. Can anyone identify what could be causing the error? m ...

javascriptjqueryajax

Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar: #main_bar { background: url(../images/logo.jpg) 99% 50% no-repeat; background-size: auto 80%; } The original size of logo.jpg is 220x266px The toolbar has a fixed height of 46px Therefore, the background image appears t ...

androidcssresizebackground-image

`vertical navigation on the left side with expanding submenus`

Trying to create a navigation system on the left side of the page with submenus appearing on the right without impacting the main content. If anyone has any code snippets or resources that can help achieve this, I would really appreciate it. The objectiv ...

htmljquerycss

Displaying text underneath an image

Hey everyone, I'm currently working on getting some text to show up below an image using Bootstrap 3. Here's what I have so far: <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" ...

htmltwitter-bootstrapcss

Utilize JWPlayer to direct users to a designated URL

I recently started using jwplayer and I have a genuine video link: To play the video using jwplayer, I utilized this function: jwplayer('player3').setup({ file:"http://localhost:8080/video/test.mp4" }) However, I wanted to redirect the URL ...

jquery.htaccessjwplayerjwplayer6

What can you tell me about Page Event functionality in Datatables?

Curious question -- I'm currently seeking a practical example of how to implement a 'page' event in a project utilizing DataTables. The provided documentation can be found here -- http://datatables.net/docs/DataTables/1.9.4/#page. Despite t ...

javascriptjquerydatatables

The iframe content is not updating despite using jQuery

On this site , the following code is present: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <iframe style="position: absolute; top: 0; left: 0; height: 100%; width: 100%" src="blank.html"></iframe ...

javascriptjqueryhtmliframe

What steps can I take to prevent my menu items from overlapping in the mobile navigation menu?

I am currently working on creating a mobile menu, but I'm facing an issue where the menu items overlap when hovered over. Instead, I want the menu items to move downwards when hovered upon to prevent the text from overlapping. Below is the HTML code ...

javascripthtmlcssmobileuinavigationbar

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png ...

imagecssresponsive-designsass

Retrieve the body's coordinates when dragging an element using the jQuery UI library

How can I obtain the coordinates of a dragged div upon drag and drop action, including left, right, and top positions? Additionally, how do I then use Ajax to post these coordinates? An example link can be found at jsfiddle.net/qPw92 <html> &l ...

javascriptjqueryajaxdrag-and-dropjquery-ui-draggable

The hover effect on the menu button is not covering the entire button when the screen is resized

It appears that I am encountering a problem with the hover functionality. When my screen is at full size, hovering over a menu option causes the entire background color to change. However, upon resizing the screen, only a part of the background color chang ...

htmlcsshover

Button that vanishes when clicked, using PHP and HTML

I am in the process of creating an online store and I am seeking to implement a button that directs users to a new page, but then disappears permanently from all pages within the store. Here is the code snippet I have developed so far: <input class="b ...

javascriptphpjqueryhtml

Struggling to align your image properly?

My attempt to center the image "Logo_Home.svg" on my page has failed, as it is currently positioned in the top left corner. Can anyone help me identify what I am doing wrong and guide me in the right direction? Thank you. EDIT 1 I realized that I forgot ...

htmlcsssvg

Once the ajax request is finished, load only the <script> tags that have specific ids

I'm currently implementing infinite-scroll to dynamically load more content which includes <script> tags that need to be executed. To achieve this, I have created the following code as an ajax-callback: JS on load ajax callback: function a ...

javascriptphpjqueryajax

Unable to transfer query parameters through the use of $.ajax

When I use the code provided, it seems that the query string 'section' is not being added to the link properly. The URL itself is working fine, but I'm struggling with adding the query string correctly. What could be causing this issue? @Ht ...

jqueryajaxasp.net-mvcquery-string

Tips for toggling the visibility of a <div> element with a click event, even when there is already a click event assigned

No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...

javascriptcssajaxshow-hideblogger

The script file (.js) isn't showing up on the PHP or HTML webpage

Experiencing a peculiar issue and seeking advice on alternative solutions due to my limited experience in this matter. The Issue: I currently have the following script running smoothly: <script type="text/javascript" id="myscript" src="http://piclau ...

javascriptphpjqueryhtmlangularjs

Basic draggable pop-up window using HTML5 for a seamless experience

Can anyone provide me with helpful resources or tutorials to create a draggable popup using HTML5 without jQuery? I want to keep it simple and avoid external libraries like jQuery UI. Currently, I have an absolutely positioned div that looks like a popup ...

jqueryhtmlpopupdraggable

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

javascriptjquerycssanimation