DocsAllOver Bootstrap 5 Multiselect Dropdown with Choices JS Snippets

Bootstrap 5 Multiselect Dropdown with Choices JS

Oct. 23, 2024

Js, Bootstrap, Bootstrap 5, Responsive, Clean UI

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Bootstrap Multiselect Dropdown</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/7.0.0/choices.min.css">
    <style>
        .mt-100 {
            margin-top: 150px;
        }

        body {
            background-color: #eee;
            color: #514B64;
            min-height: 100vh
        }

        #css-dropdown {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 300px;
            height: 42px;
            margin: 100px auto 0 auto;
        }
        .choices__list--multiple .choices__item {
    background-color: #5271ff; 
        }
    </style>
</head>

<body>

    <section>
        <div class="row d-flex justify-content-center mt-100">
            <div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select up to 3 tags"
                    multiple>
                    <option value="Author" onclick="filterSelection('Author')">Author</option>
                    <option value="MSelect">Multiselect Dropdown</option>
                    <option value="Accordions">Accordions</option>
                    <option value="Radio Buttons">Radio Buttons</option>
                    <option value="SearchBox">Search Boxes</option>
                    <option value="Tables">Tables</option>
                    <option value="Profiles">Profiles</option>
                    <option value="Sliders">Sliders</option>
                    <option value="Tabs">Tabs</option>
                    <option value="NavMenu">Navigation Menu</option>
                    <option value="Cities">Cities</option>
                    <option value="Countries">Countries</option>
                    <option value="Regions">Regions</option>
                </select>
            </div>
        </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/7.0.0/choices.min.js"></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

/* Doesn't require any CSS. */

$(document).ready(function () {

    var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
        removeItemButton: true,
        maxItemCount: 3,
        searchResultLimit: 5,
        renderChoiceLimit: 5
    });

});

This snippet combines the power of Bootstrap 5 and the Choices.js library to create a visually appealing and interactive multiselect dropdown component. The dropdown allows users to select multiple options from a list, providing a convenient and efficient way to choose from various choices.

Key Features:

Responsive Design: The multiselect dropdown adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the dropdown using Bootstrap's CSS classes and Choices.js options to match your website's design and branding.
Multiple Selections: Users can select multiple options from the dropdown list by clicking on individual items or using keyboard shortcuts.
Search Functionality: The dropdown often includes a search bar, allowing users to quickly find and select specific options.
Customizable Options: You can configure various options to customize the dropdown's behavior, such as the maximum number of selections, the placeholder text, and the appearance of the selected items.

Implementation:

Include Bootstrap 5 and Choices.js: Ensure you have Bootstrap 5 and the Choices.js library included in your project.
Create the HTML Structure: Set up the basic HTML structure for the multiselect dropdown, including the container, select element, and placeholder text.
Initialize Choices.js: Use JavaScript to initialize the Choices.js library on the select element, passing any desired configuration options.
Customize as Needed: Modify the Bootstrap classes and Choices.js options to customize the appearance and behavior of the multiselect dropdown according to your specific requirements.

Latest Snippets

View All