10 demos of Bootstrap multiselect dropdown by using jQuery

The Bootstrap multiselect with jQuery

The multiselect dropdown allows the visitors of the website selecting multiple options from a dropdown in a form.

Although, you may achieve that by using the multiple attribute in the <select> tag of HTML, however, instead of a dropdown, a list view type is displayed that allows users choosing multiple options.

Watch a Short Video of this Tutorial

In this article, the bootstrap-multiselect plug-in which is based on jQuery is used for creating the dropdowns with multiple select feature that also looks beautiful. It uses Bootstrap framework, so Bootstrap CSS and JS files are also included in the demos.

Related reading: A jQuery plug-in for multiple selections in listview and multiple selections in dropdown with checkboxes

First thing – A simple demo of multiselect

First of all, you may download the plug-in from the Github website by following this link. The demo and setup page can be seen there that is shared by the developer that contains a lot of options and respective code.

The demo HTML is quite large there and I am just trying to break up the big demo page into smaller here.

Have a look at this simple demo with only a single dropdown and minimum required files:

bootstrap multiselect

See online demo and code

The markup for this example:

 

The script:

 

The <head> section refers the following files:

 

A demo with option groups

In this demo, the option groups are used in the select dropdown. Three groups are created in the select dropdown where you can see a checkbox in front of each option. In this demo, the option group itself is not selectable. So, a user has to select each option in different option groups separately, have a look:

bootstrap multiselect option groups

See online demo and code

The script and markup:

 

A demo of selectable optional group

By adding the enableClickableOptGroups as true in the jQuery code, you may enable users to select the option group itself, thus, all options under that group will be selected at one click / selection including the option group. Have a look:

bootstrap option groups selectable

See online demo and code

The only difference between this and above example is the use of the option in the jQuery code:

 

If used false, the option groups won’t be selectable. Also note, if an option is disabled in the option group, the code will still work. However, the disabled option will not be selected as shown in the demo below:

bootstrap multiselect disable

See online demo and code

You can see, the Python option is disabled in the dropdown.

A demo of creating collapsible option groups

You may also create the dropdown with collapsible option groups by using this multiselect Bootstrap plug-in. So, if a group is clicked, its options will collapse and if clicked again it will expand.

For that, simply set the:

in the jQuery code as shown below:

bootstrap multiselect collasible

See online demo and code

The jQuery code:

 

 

Setting width of the dropdown example

By using the buttonWidth option in the jQuery code, you may set the width of the dropdown. See this example where I set the width of the dropdown to 300px:

bootstrap multiselect width

See online demo and code

The jQuery code:

 

A demo of multiselect dropping right

By default, the options in the dropdown falls left whether using this or ordinary HTML select dropdown. You may also drop it right by using the dropRight: true option:

bootstrap multiselect drop right

See online demo and code

The script:

 

A demo of dropping multi-select towards top

Similarly, you may drop the options towards top rather than default downwards. See the demo by clicking the image or link below:

bootstrap multiselect drop top

See online demo and code

The script:

 

 

A demo with filtering options

You may add a search box for filtering the options inside the multiselect dropdown. For that, simply add the following option in the jQuery code:

enableFiltering: true

This option will add a textbox where a user may enter letters to filter out the options. See this demo:

bootstrap multiselect filter

See online demo and code

The script:

 

The markup remains the same as in many other examples for showing the multiselect dropdown.

Changing the default text when none of the options is selected

In all above examples, the text displayed if none of the options is selected is: “None Selected”.

You may change this text in the context of the multiselect dropdown. For example, in our examples, I am using the web development, programming languages and databases for selecting the expertise. I will use the “Select expertise!” if none is selected as follows:

bootstrap multiselect none selected

See online demo and code

The script:

 

Other options for the multiselect dropdown

The plug-in has many other options that you may explore by going to the demo page from the Github website. For example, calling the callback functions as a dropdown is loaded, after the dropdown is shown, and calling a callback function after the dropdown is closed. You may perform the different actions on each event as using this plug-in.