Bootstrap is a powerful framework for building responsive and feature-rich web applications. One of the key components of a web application is the ability to select multiple options from a list. Bootstrap Multi-Select with checkboxes allows users to easily make multiple selections from a dropdown list. In this blog post, we will guide you through creating a Bootstrap Multi-Select Option with checkboxes using Bootstrap 5.2.
GitHub: Code View
Live : Live View
Prerequisites
Before we start, make sure you have the following prerequisites installed in your project:
- Bootstrap 5.2
- jQuery 3.7.1
- Bootstrap Multi-Select 1.1.2
You can include them in your project by adding the following CDN links to your HTML file's
section:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css" integrity="sha512-fZNmykQ6RlCyzGl9he+ScLrlU0LWeaR6MO/Kq9lelfXOw54O63gizFMSD5fVgZvU1YfDIc6mxom5n60qJ1nCrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js" integrity="sha512-lxQ4VnKKW7foGFV6L9zlSe+6QppP9B2t+tMMaV4s4iqAv4iHIyXED7O+fke1VeLNaRdoVkVt8Hw/jmZ+XocsXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Creating the Bootstrap Multi-Select
Let's create a Bootstrap Multi-Select with checkboxes in your HTML file.
<div class="d-flex text-left align-items-center w-100">
<strong class="sl">Select Language:</strong>
<select id="multiple-checkboxes" multiple="multiple">
<option value="front-end">Front End</option>
<option value="back-end">Back End</option>
</select>
<br>
<select name="property_nhb[]" id="p-nhb" multiple>
<option data-value="" value="" selected>all</option>
<option data-value="back-end" value="php">PHP</option>
<option data-value="front-end" value="javascript">JavaScript</option>
<option data-value="back-end" value="java">Java</option>
<option data-value="back-end" value="sql">.Net</option>
<option data-value="front-end" value="jquery">Jquery</option>
<option data-value="front-end" value=".net">.Net</option>
</select>
</div>
In the code above, we have two <select> elements, one with the id "multiple-checkboxes" for selecting languages and another with the id "p-nhb" for selecting programming languages.
Initializing the Bootstrap Multi-Select
To enable the Bootstrap Multi-Select with checkboxes, we need to initialize it using JavaScript. Add the following script at the end of your HTML file:
<script>
$('#multiple-checkboxes').multiselect({
buttonClass: 'form-select',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
}
});
$('#p-nhb').multiselect({
buttonClass: 'form-select',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" ><span class="multiselect-selected-text"></span></button>',
}
});
var select_clone = $('<select>')
.html($('#p-nhb option'))
.hide()
.insertAfter('#p-nhb');
$('#p-nhb').multiselect();
$('#multiple-checkboxes').change(function () {
$('#p-nhb').html(select_clone.find('[data-value="' + this.value + '"]').clone());
$('#p-nhb').multiselect('rebuild');
}).change();
$('#get').click(function () {
console.log('city: ' + $('#multiple-checkboxes').val() + ', neighborhood: ' + $('#p-nhb').val().toString());
});
</script>
This script initializes the Bootstrap Multi-Select for both elements and provides functionality to update the options in the "p-nhb" dropdown based on the selections in the "multiple-checkboxes" dropdown.
Conclusion
In this blog post, we've shown you how to create a Bootstrap Multi-Select Option with checkboxes using Bootstrap 5.2. This feature can be valuable in various scenarios where you need to allow users to make multiple selections from a list of options. You can customize the appearance and behavior of the multi-select dropdown according to your project's requirements.
Top comments (0)