jQuery MultiSelect Dropdown Checkbox With Search

jQuery MultiSelect Dropdown provides very useful functionality to users to select multiple options from the dropdown.

Generally, we will use multiple attributes on HTML <select> tags to do these multiple selections by holding the ctrl button from the keyboard.

But now with the help of the jQuery MultiSelect plugin, we can create a nice and easy-to-use multi-select dropdown.

By using this jQuery MultiSelect plugin we can create a nice MultiSelect Dropdown with a Checkbox.

jQuery MultiSelect Dropdown Checkbox — jQuery MultiSelect

Here I will show the step-by-step process with a live view of the multi-select dropdown list with a checkbox with complete source code.

Include jQuery MultiSelect Plugin
Create a Select Box with HTML
jQuery MultiSelect Dropdown Checkbox With Search
MultiSelect Checkbox Select All
Nice MultiSelect Dropdown With a Checkbox

Here we will discuss the above points. Start with including the multiselect plugin.

Include jQuery MultiSelect Plugin

Here we will use the jQuery library and plugin CSS and JS files. You can also download the jQuery MultiSelect Plugin by pasting those links on another tab.

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- JS & CSS library of MultiSelect plugin -->
<script src="https://phpcoder.tech/multiselect/js/jquery.multiselect.js"></script>
<link rel="stylesheet" href="https://phpcoder.tech/multiselect/css/jquery.multiselect.css">

Create a Select Box with HTML

Here we will create a dropdown list by using an HTML <select> tag. And also add multiple an attribute to create multi-select functionality.

<select name="languageSelect[]" multiple id="languageSelect">
    <option value="C++">C++</option>
    <option value="C#">C#</option>
    <option value="Java">Java</option>
    <option value="Objective-C">Objective-C</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Perl">Perl</option>
    <option value="PHP">PHP</option>
    <option value="Ruby on Rails">Ruby on Rails</option>
    <option value="Android">Android</option>
    <option value="iOS">iOS</option>
    <option value="HTML">HTML</option>
    <option value="XML">XML</option>
</select>

<option value="Objective-C">Objective-C</option>

<option value="JavaScript">JavaScript</option>

<option value="Ruby on Rails">Ruby on Rails</option>

<option value="Android">Android</option>

</select>

jQuery MultiSelect Dropdown With Checkbox

If we just want to convert a simple HTML multi-select box with a nice MultiSelect Dropdown With Checkbox then we will use the below source code with jQuery library and CSS and JS of the plugin.

jQuery('#languageSelect').multiselect({
    columns: 1,
    placeholder: 'Select Languages',
});

jQuery('#languageSelect').multiselect({

columns: 1,

placeholder: 'Select Languages',

});

Code Highlights

In the first line, we use the ID attribute of <select> tag.
Use the MuliSelect function with the same ID attribute to convert simply to jQuery-based MultiSelect.
Then we add parameters like placeholder and number of columns inside the MultiSelect function.

Live Demo:

See the Pen jQuery MultiSelect Dropdown With Checkbox by Bikash Panda (@phpcodertech) on CodePen.

Also Read: jQuery Text Changed Event For Textbox with Example

jQuery MultiSelect Dropdown Checkbox With Search

After including all the JS libraries and multi-select plugins, now we can add a search option with jQuery MultiSelect Dropdown Checkbox With Search.

Here is the complete code and live view,

jQuery('#languageSelect').multiselect({
    columns: 1,
    placeholder: 'Select Languages',
    search: true
});

jQuery('#languageSelect').multiselect({

columns: 1,

placeholder: 'Select Languages',

search: true

});

Live Demo:

See the Pen by Bikash Panda (@phpcodertech) on CodePen.

MultiSelect Checkbox Select All

Here we will use the same or the above jQuery code to create multi-select but just include a new parameter selectAll: true.

jQuery('#languageSelect').multiselect({
    columns: 1,
    placeholder: 'Select Languages',
    search: true,
    selectAll: true
});

jQuery('#languageSelect').multiselect({

columns: 1,

placeholder: 'Select Languages',

search: true,

selectAll: true

});

Live Demo:

See the Pen jQuery MultiSelect Checkbox Select All by Bikash Panda (@phpcodertech) on CodePen.

Also Read: jQuery Signature Pad with saving As Image Using html2canvas

Get Selected Value using $_POST Method in PHP

After selecting the values, if you want to take that data using PHP, we just use $_POST (Global Variable) and HTML name attribute of the select tag.

$_POST['languageSelect'];

1	$_POST['languageSelect'];

Conclusion

Here we will discuss the complete jQuery MultiSelect functionality by doing different tasks. Here we discuss the 5 points of the multi-select plugin.

First how we can include it on our page and how to download it from the URL? Then we check how we convert HTML MultiSelect to nice JS MultiSelect with the search box and select all functionality.

I hope you all understand the complete source code. Please let me know if you are facing any issues with implementation.

Check more use of plugins here jQuery: MultiSelect › Projects › Patrick Springstubbe.

Happy Coding..!

Was this article helpful?

YesNo