jQuery Multi-select Dropdown with Checkbox and Searching: 3 Demos

The fSelect plug-in for multi-select dropdowns

By using the fSelect plug-in, you may create the simple or option group based select dropdowns that allow selecting one or more options. Each option in the dropdown has a checkbox while the selected value is also displayed on top.

Moreover, the dropdown has a search box where a user may filter the options in the dropdown.

Demo1 Demo2 Demo3
Developer’s page Download plug-in

How to use the fSelect plug-in?

First of all, download the plug-in from the above link and place the fSelect.js file in your project directory. After that, refer the JS and CSS files in the web page:

<link href=”css/jquery-fSelect/fSelect.css” rel=”stylesheet”>

<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js”></script>

<script src=”js/jquery-fSelect/fSelect.js”></script>

Initiate the plug-in via JavaScript:

$(‘.multi-select-dd’).fSelect();

The markup is a <select> tag with options as shown in the demos below.

A demo of multi-select dropdown

In this demo, a few options are used in the <select> tag without the option groups. Two options are selected initially that you can see in the dropdown as well.

Press the dropdown and select the checkbox or option’s text and see how it also updates in the dropdown:

jQuery multi select

See online demo and code

The markup:

 

The script:

An example with option groups

The multi-select with the checkbox will also work for option groups in the dropdown. See this demo where three option groups are created with a few options in each. One option in each group is pre-selected. Have a look:

jQuery-multi select option groups

See online demo and code

The markup:

 

The script for initiating the plug-in:

A demo of using available options

The plug-in has a few options that you may use for customizing the plug-in. For example, you may change the selections appearing in the dropdown (default is 3). Similarly, the search option may hide by setting its value as false i.e.:

showSearch: false

If you want to display the search, then the placeholder text can be changed from Search to something that you want by using the searchText option.

See this demo where I used different options including search and specifying the display of options as four:

jQuery multi select options

See online demo and code

The script:

 

For more on this cool plug-in, visit the developer page.