jQuery Multiple Select Plugin For Bootstrap – Bootstrap Multiselect

Form
Demo    Download
File Size: 13.7 KB
Views Total: 747 views
Last Update:April 12, 2021
Publish Date: October 10, 2012
Official Website: Go to website
License: MIT
Plugin Author: davidstutz

A Free Multiple Select Plugin with Bootstrap 3 & 4 in jQuery Plugin that permits the clients to choose numerous choices from a dropdown select rundown containing the single alternatives with checkboxes.

More Features:

  • HTML content in options.
  • Right or Top dropdown options.
  • Select All option to select all options with a single click.
  • collapsible Options with Groups.
  • Allows with filter options.
  • Custom templates options.
  • Keyboard accessible.
  • Server-Side Processing.
  • And much more.

Alternative plugins:

  • jQuery Plugin With Multiple Select Box Plugin
  • jQuery Plugin Multiple Select Element Replacement Plugin – selectlist
  • jQuery Plugin For Selecting Multiple Elements – Multiple Select

View more Multi Select plugins at:

  • 30 Best Multiple Select jQuery Plugins

How To Used:

Add jQuery javaScript with library and Bootstrap framework on your page.

Here, we’re adding one CSS file for appearance and JavaScripted files into the existing code.

<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

Add jQuery bootstrap multiselect plugin on the page, after jQuery library.

Here, the jQuery library needs to be included in both the Javascript library and the CSS stylesheet.

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

Create a standard select list.

Now we’re simply using HTML to create your select input, which we want to turn into a multiselect. So we created a tag <select> with an id called demo and attribute set to multiple. Here Multiple attributes will act as a simple multiselect.

<select id="demo" multiple="multiple">
 <option value="Python">Python</option>
  <option value="C++">C++</option>
  <option value="Javascript">Javascript</option>
  <option value="LISP">LISP</option>
  <option value="jQuery">jQuery</option>
  <option value="Ruby">Ruby</option>
</select>

Call on function with select element to initialize the plugin.

In the end, we’re calling the function multiselect.

$(function(){
  $('#demo').multiselect();
});

Done

List Of Version :
  • v1.0.0
  • v0.9.16
  • v0.9.15
  • v0.9.14
  • v0.9.13
  • v0.9.12
  • v0.9.11
  • v0.9.10
  • v0.9.9
  • v0.9.8
  • v0.9.7
  • v0.9.6
  • v0.9.5
  • v0.9.4
  • v0.9.3
  • v0.9.2
  • v0.9.1
  • v0.9

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.