Are you looking for an easy solution to implement Multiselect Dropdown with Checkbox into the Bootstrap 4 framework? Here we are going to share a lightweight jQuery plugin that helps you to create multiple selection functionality with check-boxes using HTML and CSS. This type of dropdown allows the user to select multiple items from a list.
Additionally, the checkbox allows the user to indicate that they want to be able to select all items in the list. The code is easy to follow and can be implemented quickly in your own projects. Let’s get started!
How to Use Bootstrap 4 Multiselect Dropdown
We will start the implementation of Multi Select Dropdown Bootstrap by adding the important files. You simply need to load the jQuery and Bootstrap framework files into the HTML document.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Next, we need to add the Javascript and Bootstrap multi-select CSS files to the head of the page.
<!-- Bootstrap Multiselect CSS -->
<link rel="stylesheet" href="css/bootstrap-multiselect.css">
<!-- Bootstrap Multiselect JS -->
<script data-main="dist/js/" src="js/require.min.js"></script>
Once we add all the important files then we need to start building the HTML to make work the Multiple select. The HTML is very simple, just use select HTML element and add a list of options. Just make sure we have ID mySelect added to the select element.
<select id="mySelect" multiple="multiple">
<option value="Option one">Option one</option>
<option value="Option two">Option two</option>
<option value="Option three">Option three</option>
<option value="Option four">Option four</option>
<option value="Option five">Option five</option>
<option value="Option six">Option six</option>
</select>
To activate the function on HTML, we need to initial the Dropdown Select jQuery Plugin through the following Javascript function.
<script>
require(['bootstrap-multiselect'], function(purchase){
$('#mySelect').multiselect();
});
</script>
Advanced Configuration Options for Multiselect Dropdown with Checkboxes
There are many options available in this plugin that help you to customize it according to your need. You can refer to the demo page where all the options are listed. You can apply and get your desired result.