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

Access information from multiple div elements using JavaScript data-attributes

Having trouble retrieving data-attribute values from multiple divs with the same class when clicked. The goal is to display the data value of the clicked div. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) ...

javascripthtmlcsscustom-data-attribute

Learn the process of integrating JSON data into a jQuery Datatable!

I am facing an issue while trying to load data into jQuery Data table using MVC. The data is only displaying in JSON format in the browser instead of populating the data table, as shown below: {"data":[{"ID":1,"FullName":"John Smith","Email":"[email prote ...

jqueryajaxasp.net-mvcdatatables

Looping through multiple ajax requests to track the most recent responses

Run a loop with the most recent response obtained from the previous ajax call. The current code is continuously displaying the same response. PHP outputs data in text format. Currently, the code fetches response text from the PHP file and appends it to a ...

jqueryajax

The appearance of Bootstrap React Nextjs doesn't quite match what's shown in the documentation

I am developing the frontend of my application using a combination of bootstrap, react, and nextjs. I attempted to implement the example provided by react-bootstrap at https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic. ...

cssnode.jsreactjsnext.jsbootstrap-5

Contrast the table column to a JSON object and modify a different column in an HTML file

This Dashboard is my first venture into using HTML and Javascript to create an interactive display. The table within this Dashboard showcases server names, descriptions, and time-related columns for uptime, warning, and critical statuses. To generate an A ...

javascriptjqueryhtmljsonhtml-table

What is the reasoning behind beginning the transition with autofocus enabled?

After creating a contact form with autofocus="autofocus", a strange behavior was noticed. It seems that when the form has autofocus, the transition effect on the navigation bar is triggered in Firefox only. Is this an error on my end or just a bug specific ...

htmlcssfirefox

How can I use jQuery UI to slide a div, while also smoothly moving the adjacent div to take its place?

Wishing you an amazing New Year! I am looking to create a smooth sliding effect for a div when a button is clicked. I want the adjacent div to slide alongside it seamlessly, without any clunky motions or delays. Currently, the adjacent div only moves afte ...

javascriptjqueryjquery-uisliderjquery-ui-slider

The value of the jQuery data on click event handler becomes 'undefined' when used within an AJAX handler

When I click on the Positive or Negative buttons, a jQuery event handler function is triggered. Each button passes different data objects to the handler. However, within the AJAX POST handler, I am unable to access the data from the click event. $('# ...

javascriptjqueryajaxevent-handling

Removing the ajax scroll and ajax loader functionality in my jQuery script

I have implemented an ajax loader in the code snippet below. The issue arises when the data fetched from the database is fully displayed, the scroll function continues to run infinitely and the ajax loader image remains visible. I am looking for a way to ...

phpjqueryajax

Is it possible to load the response from the $.post function, which contains GIF content, into a JavaScript Image object

How can I preload an image that the server only returns on a POST request? I want to load the image before displaying it. How can I store the result in a JavaScript object? $.post('image.php', {params: complexParamsObject}, function(result) { ...

javascriptjqueryajaximagedownload

Using Jquery to dynamically adjust select options based on the value of another select option

My goal is to create a short form where each select box dynamically populates the next one. The options for the first select box are hardcoded in the body, while the subsequent options are defined as an HTML string in a variable corresponding to the value ...

jquery

Customizing the appearance of the Bootstrap Typeahead

I've been experimenting with the Bootstrap Typeahead for my search feature. I successfully implemented the dropdown list using Ajax. However, I am looking to customize the width, padding, and background color of the dropdown menu, which is currently w ...

javascriptjqueryhtmlcsstwitter-bootstrap

When using jQuery, ensure that the event only triggers when a user clicks on an li element and not an

My current configuration is as follows: <ul> <li><a href="http://www.example.com">Example</a></li> <li><a href="http://www.example2.com">Example2</a></li> </ul> The li elements have a widt ...

jquery

How to use JQuery UI sortable to automatically scroll to the bottom of the page

Having trouble with a few sortable tables and here is how I initialized the sortable object: var options = { helper: customHelper, handle: ".moveTargetDeliverables", containment: "#fieldset_deliverables_summary", tolerance: 'pointer&a ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to switch between displays within an if-else statement?

I've been struggling to toggle the circle on click to reveal the checkmark and hide the circle. I've already implemented the hover effect in CSS where the circle disappears and the checkmark appears. HTML <p class="reme"> <a href="#" ...

jqueryhtmlcssfont-awesome

My live website is plagued by an annoying horizontal scroll bar that doesn't appear in the local host version

I am struggling to remove the unwanted horizontal scroll bar on my live website, although it is not visible on my local host... <-- this is my website, built using Vite + ReactJs. I attempted to use overflow: hidden; and max-width: 100% on the body t ...

cssreactjswebweb-deploymentvite

The effective method for transferring a PHP variable value between two PHP files using jQuery

I am looking to transmit the variable "idlaw" from base.js to the PHP page edit.php. modifyLegislation.php <input class='btn btn-primary buttonBlue' type='button' name='btnAcceptPending' value='Edit' onClick="ja ...

javascriptphpjquerypost

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

csshtml-listsspacing

URL not receiving AJAX request

I encountered an issue while attempting to send an ajax request to a specific URL in order to receive a JSON response. However, the request does not appear to be going to /login as expected. Instead, it remains on the current URL and appends the formData p ...

jqueryajax

Retrieving data from mySQL database to display search suggestions using jQueryUI autocomplete

I'm trying to set up an autocomplete feature for a field that connects to an external source and retrieves data from an SQL database: $("#venuename").autocomplete({ source: function(req, add){ $.getJSON("../autocomplete/venu ...

jqueryjquery-uiautocomplete