jQuery Multiselect Plugin for Bootstrap: A Complete Guide with Examples

In this article, we will explore the jQuery Multiselect Plugin for Bootstrap, a powerful tool that allows you to transform standard dropdowns into advanced multi-select components. jQuery Multiselect Plugin for Bootstrap.

We will walk through its installation, configuration, and provide coding examples to help you understand how to integrate and use this plugin effectively in your web projects.

Introduction to jQuery Multiselect Plugin
The jQuery Multiselect Plugin for Bootstrap is designed to enhance the functionality of standard HTML select elements by providing a user-friendly interface for selecting multiple options. This plugin leverages Bootstrap’s styling and components to create a seamless and visually appealing multi-select experience.

Why Use jQuery Multiselect Plugin?

User Experience: Improves user interaction with dropdowns, allowing for multiple selections with checkboxes.
Customization: Offers various configuration options to customize the look and behavior of the multi-select component.
Integration: Easily integrates with Bootstrap, maintaining a consistent design language across your application.

Prerequisites

Before we begin, make sure you have the following:

Basic understanding of HTML, CSS, and JavaScript.
Bootstrap and jQuery libraries included in your project.

Step-by-Step Guide

Step 1: Include Bootstrap and jQuery

First, ensure you have included the Bootstrap and jQuery libraries in your project. You can include them via CDN links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Multiselect Plugin for Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Step 2: Include the jQuery Multiselect Plugin

Next, include the jQuery Multiselect Plugin’s CSS and JS files. You can download these files from the plugin’s official website or use CDN links.

<head>
    ...
    <!-- jQuery Multiselect Plugin CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/css/bootstrap-multiselect.css">
</head>
<body>
    ...
    <!-- jQuery Multiselect Plugin JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/js/bootstrap-multiselect.min.js"></script>
</body>

Step 3: Create a Select Element

Create a standard HTML select element with the multiple attribute to allow for multiple selections.

<body>
    <div class="container mt-5">
        <h2>Select Your Options</h2>
        <form>
            <div class="form-group">
                <label for="example-multiselect">Example Multiselect</label>
                <select id="example-multiselect" multiple="multiple" class="form-control">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                    <option value="option4">Option 4</option>
                </select>
            </div>
        </form>
    </div>
</body>

Step 4: Initialize the Multiselect Plugin

Initialize the jQuery Multiselect Plugin on the select element using JavaScript.

<script>
$(document).ready(function() {
    $('#example-multiselect').multiselect({
        includeSelectAllOption: true,
        buttonWidth: '100%',
        nonSelectedText: 'Select Options',
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true
    });
});
</script>

Step 5: Customize the Multiselect Plugin

The jQuery Multiselect Plugin provides various options for customization. Here are a few common options:

includeSelectAllOption: Adds a “Select All” option.
buttonWidth: Sets the width of the dropdown button.
nonSelectedText: Text displayed when no options are selected.
enableFiltering: Enables a search box within the dropdown.
enableCaseInsensitiveFiltering: Makes the search case-insensitive.

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Multiselect Plugin for Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery Multiselect Plugin CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/css/bootstrap-multiselect.css">
</head>
<body>
    <div class="container mt-5">
        <h2>Select Your Options</h2>
        <form>
            <div class="form-group">
                <label for="example-multiselect">Example Multiselect</label>
                <select id="example-multiselect" multiple="multiple" class="form-control">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                    <option value="option4">Option 4</option>
                </select>
            </div>
        </form>
    </div>
    <!-- jQuery Multiselect Plugin JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/js/bootstrap-multiselect.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#example-multiselect').multiselect({
            includeSelectAllOption: true,
            buttonWidth: '100%',
            nonSelectedText: 'Select Options',
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true
        });
    });
    </script>
</body>
</html>

Output:

Let us make the above code more appealing:

Enhancements and Additions:

Header and Footer: Added a header for the title and a footer with some basic information.
Custom CSS: Added custom CSS to improve the styling of the container, header, and footer.
Button: Added a submit button to make the form interactive.
Bootstrap Classes: Utilized Bootstrap classes for better spacing and layout.

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Multiselect Plugin for Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #343a40;
            margin-bottom: 20px;
        }
        footer {
            margin-top: 50px;
            padding: 20px 0;
            background-color: #343a40;
            color: #fff;
            text-align: center;
        }
    </style>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery Multiselect Plugin CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/css/bootstrap-multiselect.css">
</head>
<body>
    <header class="bg-dark text-white p-3 text-center">
        <h1>jQuery Multiselect Plugin for Bootstrap</h1>
    </header>
    <div class="container mt-5">
        <h2>Select Your Options</h2>
        <form>
            <div class="form-group">
                <label for="example-multiselect">Example Multiselect</label>
                <select id="example-multiselect" multiple="multiple" class="form-control">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    <option value="option3">Option 3</option>
                    <option value="option4">Option 4</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <footer>
        &copy; 2024 Your Company. All Rights Reserved.
    </footer>
    <!-- jQuery Multiselect Plugin JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@0.9.15/dist/js/bootstrap-multiselect.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#example-multiselect').multiselect({
            includeSelectAllOption: true,
            buttonWidth: '100%',
            nonSelectedText: 'Select Options',
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true
        });
    });
    </script>
</body>
</html>

Output:

Conclusion

The jQuery Multiselect Plugin for Bootstrap enhances standard HTML select elements, making them more interactive and user-friendly. By following this guide, you can easily integrate and customize this plugin in your projects, providing a better experience for your users. With its rich set of features and seamless integration with Bootstrap, this plugin is a valuable tool for any web developer.

CodeMagnet

CodeMagnet

jQuery Multiselect Plugin for Bootstrap: A Complete Guide with Examples

Why Use jQuery Multiselect Plugin?

Prerequisites

Step-by-Step Guide

Step 1: Include Bootstrap and jQuery

Step 2: Include the jQuery Multiselect Plugin

Step 3: Create a Select Element

Step 4: Initialize the Multiselect Plugin

Step 5: Customize the Multiselect Plugin

Enhancements and Additions:

Like this:

Author

Leave a ReplyCancel reply

Hangman Game in Python: Beginner-Friendly Project with Source Code

Python Google Trends Analysis Made Easy with TrendSpy-Lite 0.0.3

Pydantic v3: The New Standard for Data Validation in Python (Why Everything Changed in 2025)

Trending

Hangman Game in Python: Beginner-Friendly Project with Source Code

Python Google Trends Analysis Made Easy with TrendSpy-Lite 0.0.3

Pydantic v3: The New Standard for Data Validation in Python (Why Everything Changed in 2025)

Data Cleaning with Pandas in Python – A Complete Guide

CodeMagnet

Subscribe to CodeMagnet! 🔔

jQuery Multiselect Plugin for Bootstrap: A Complete Guide with Examples

Why Use jQuery Multiselect Plugin?

Prerequisites

Step-by-Step Guide

Step 1: Include Bootstrap and jQuery

Step 2: Include the jQuery Multiselect Plugin

Step 3: Create a Select Element

Step 4: Initialize the Multiselect Plugin

Step 5: Customize the Multiselect Plugin

Enhancements and Additions:

Share this:

Like this:

Author

Leave a ReplyCancel reply

Trending