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:
.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>
Output:
.gif)
Similar Reads
How to create a dropdown menu in Bootstrap ?
A dropdown menu offers a list of alternatives when clicked or hovered on, which is a clean method of providing a list of alternatives as only one option is displayed initially onto the screen. Drop-down menus are used in almost all types of software nowadays to show sub-options of the option. Step 1
2 min read
How to use Multi-Select Dropdown in React-Bootstrap ?
In ReactJS applications, we always need to add the UI component that allows us to select multiple options from the DropDown list. So in Bootstrap, the Multi-Select Dropdown is a UI component that allows us to select multiple different options from the list of dropdown menus. Additionally, we can do
4 min read
How to create a form within dropdown menu using Bootstrap ?
A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some use
3 min read
How to change Dropdown Icon on Bootstrap 5?
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not hovering this is an intentional design decision. In this article, we will learn How to change the Dr
4 min read
How to set dropdown and search box in same line using Bootstrap?
A dropdown menu is a type of menu, by using the dropdown menu user can select something from the given predefined set. It is a toggleable menu, which means it appears when the user clicks on the menu. A search box is a type of box in which you can write the string that you want to search. The main a
3 min read
How to Create a Select All Checkbox in JavaScript ?
In web apps with lots of checkboxes, a "Select All" checkbox is useful. It lets users check or uncheck all checkboxes at once, making things quicker. This feature can be implemented in various ways, such as utilizing JavaScript and JQuery to incorporate a "Select All" checkbox. This enhances the app
2 min read
Bootstrap 5 Input group Buttons with dropdowns
Bootstrap 5 Input group Buttons with dropdowns is used to display a button along with an input group. On Clicking this button, it gives a dropdown menu. Input group Buttons with dropdowns Classes: No special classes are used in Input group Buttons with dropdowns. You can customize the component usin
2 min read
How to select/deselect multiple options in dropdown using jQuery ?
To select and deselect multiple options in a drop-down menu, we will use the HTML and CSS codes. HTML code helps to define the basic structure of the webpage and CSS will benefit in designing the web page. Some essential properties used in the code are as follows- <div> - This is a division ta
4 min read
How to use bootstrap-select for dropdown?
Bootstrap Select is a form control that shows a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user.ApproachThere are only some style properties that can be applied to the <option> component. This is because this sort of compone
2 min read
How To Get Multiple Checkbox Values In ReactJS?
Handling checkboxes in ReactJS becomes important when creating forms or managing user input. If you need to select multiple options, we can do it by implementing multiple checkboxes. In this article, we'll explore how to get the values of multiple checkboxes in ReactJS, manage the state, and display
4 min read