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.
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 |
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.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}