How to Create Multiple Selection Dropdown with Checkbox in Bootstrap 5 ?

Last Updated : 05 Jul, 2023

Bootstrap is a framework that is suitable for mobile-friendly web development. it means the code and the template available on Bootstrap are applicable to various screen sizes. It is responsive for every screen size. Dropdowns are built on a third-party library, Popper, which provides dynamic positioning and viewport detection. Bootstrap 5 provides a simple and elegant solution to achieve this functionality by utilizing checkboxes within the dropdown menu. In this article, we will learn how to use a multiple-selection dropdown with checkboxes in Bootstrap 5, eliminating the need for the control key.

Approaches:

Below are the commonly used approaches to use the multiple selection dropdown with a checkbox without pressing the control key:

Approach 1: Using Bootstrap's Custom Dropdown Plugin

In this approach, the dropdown item contains a checkbox. When a checkbox is checked or unchecked, we update the selected items array and the text displayed on the dropdown button. By listening to the 'change' event of each checkbox, we dynamically update the selected items and the button text.

Syntax:

const chBoxes = document.querySelectorAll(
    '.dropdown-menu input[type="checkbox"]');
const dpBtn = 
    document.getElementById('multiSelectDropdown');
...
chBoxes.forEach((checkbox) => {
    checkbox.addEventListener('change', handleCB);
});

Example: This example describes the use of the multiple selection dropdown with a checkbox in Bootstrap 5 without pressing the control key by implementing Custom Dropdown Plugin.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h1 class="text-success">
              GeeksforGeeks
          </h1>
        <h2>
              Multiple Selection Dropdown with Checkbox
          </h2>

        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle"
                    type="button" 
                    id="multiSelectDropdown"
                    data-bs-toggle="dropdown" 
                    aria-expanded="false">
                Select
            </button>
            <ul class="dropdown-menu" 
                aria-labelledby="multiSelectDropdown">
                <li>
                  <label>
                    <input type="checkbox" 
                           value="Java">
                        Java
                    </label>
                </li>
                <li>
                  <label>
                    <input type="checkbox" 
                           value="C++">
                        C++
                    </label>
                </li>
                <li>
                  <label>
                    <input type="checkbox" 
                           value="Python">
                        Python
                    </label>
                </li>
            </ul>
        </div>
    </div>

    <script>
        const chBoxes =
            document.querySelectorAll('.dropdown-menu input[type="checkbox"]');
        const dpBtn = 
            document.getElementById('multiSelectDropdown');
        let mySelectedListItems = [];

        function handleCB() {
            mySelectedListItems = [];
            let mySelectedListItemsText = '';

            chBoxes.forEach((checkbox) => {
                if (checkbox.checked) {
                    mySelectedListItems.push(checkbox.value);
                    mySelectedListItemsText += checkbox.value + ', ';
                }
            });

            dpBtn.innerText =
                mySelectedListItems.length > 0
                    ? mySelectedListItemsText.slice(0, -2) : 'Select';
        }

        chBoxes.forEach((checkbox) => {
            checkbox.addEventListener('change', handleCB);
        });
    </script>
</body>

</html>

Output:

ezgifcom-crop-(18).gif

Approach 2: Using Custom JavaScript Event Handlers

In this approach, we have manually defined an event handler to handle the 'change' event of the dropdown menu. Whenever a checkbox is checked or unchecked, we update the selected items array accordingly. Additionally, we dynamically update the text displayed on the dropdown button based on the selected items.

Syntax:

const dropdownButton = document.getElementById('multiSelectDropdown');
const dropdownMenu = document.querySelector('.dropdown-menu');
  ...
dropdownMenu.addEventListener('change', handleCB);

Example: This example describes the use of the multiple selection dropdown with a checkbox in Bootstrap 5 without pressing the control key by implementing Custom JavaScript Event Handlers.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
    </script>

</head>

<body>
    <div class="container">
        <h1 class="text-success">
              GeeksforGeeks
          </h1>
        <h2> 
              Multiple Selection Dropdown with Checkbox
          </h2>

        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle"
                    type="button" 
                    id="multiSelectDropdown"
                    data-bs-toggle="dropdown" 
                    aria-expanded="false">
                Select
            </button>
            <ul class="dropdown-menu" 
                aria-labelledby="multiSelectDropdown">
                <li>
                      <label>
                        <input type="checkbox" 
                               value="Java">
                        Java
                    </label>
                </li>
                <li>
                      <label>
                        <input type="checkbox" 
                               value="C++">
                        C++
                    </label>
                </li>
                <li>
                      <label>
                        <input type="checkbox" 
                               value="Python">
                        Python
                    </label>
                </li>
            </ul>
        </div>
    </div>

    <script>
        const dropdownButton =
              document.getElementById('multiSelectDropdown');
        const dropdownMenu = 
              document.querySelector('.dropdown-menu');
        let mySelectedItems = [];

        function handleCB(event) {
            const checkbox = event.target;
            if (checkbox.checked) {
                mySelectedItems.push(checkbox.value);
            } else {
                mySelectedItems = 
                  mySelectedItems.filter((item) => item !== checkbox.value);
            }

            dropdownButton.innerText = mySelectedItems.length > 0
                ? mySelectedItems.join(', ') : 'Select Items';
        }

        dropdownMenu.addEventListener('change', handleCB);
    </script>
</body>

</html>