Bootstrap Multi-Select Option with Checkbox in Bootstrap 5.2

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.