jQuery Multiselect Plugin Based on Bootstrap

January 04, 2020 No comments jQuery Bootstrap Multiselect Dropdown

1. Introduction

bootstrap-multiselect is a jQuery plugin to create multiselect dropdown components. The plugin is based on the Twitter Bootstrap framework and comes with many features. In runtime bootstrap-multiselect transform simple HTML selects into Bootstrap buttons that will open a dropdown menu with available options as checkboxes.

Jquery plugin dropdown multiselect

2. Plugin Overview

Library bootstrap-multiselect
Author David Stutz
Licence Apache License 2.0 and BSD 3-Clause License
Repository GitHub
Dependencies jQuery 3.3.1 or Latest version and Bootstrap 4.1.3

Demo

3. How to install and use bootstrap-multiselect jQuery plugin

Follow the below steps to install bootstrap-multiselect jQuery plugin on your website.

3.1. Load Bootstrap and jQuery CSS and JS files:

<!-- 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">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

3.2. Include bootstrap-multiselect plugin assets into HTML document:

<!-- 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>

3.3. Create HTML dropdown with a list of options:

<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="Mozzarella">Mozzarella</option>
    <option value="Mushrooms">Mushrooms</option>
    <option value="Pepperoni">Pepperoni</option>
    <option value="Onions">Onions</option>
</select>

3.4. Initialize the plugin by calling .multiselect() function:

<script>
    $('#mySelect').multiselect();
</script>

After initializing the plugin, selected dropdown component ($('#mySelect')) will be replaced with bootstrap button that shows available options with checkboxes.

4. Conclusion

In this article, we presented bootstrap-multiselect jQuery plugin that lets you create multi-select components. The plugin based on the very popular Bootstrap framework so it will be easy to integrate for someone who is already using this framework. Bootstrap-multiselect is a great user-friendly alternative to simple HTML components.

{{ message }}

{{ 'Comments are closed.' | trans }}