jQuery Multi-Select Dropdown Checkbox With Search

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

Generally, we use multiple attribute on HTML <select> tag 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 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 checkbox with complete source code.

  1. Include jQuery MultiSelect Plugin
  2. Create a Select Box with HTML
  3. jQuery MultiSelect Dropdown Checkbox With Search
  4. MultiSelect Checkbox Select All
  5. Nice MultiSelect Dropdown With Checkbox

Here we discussing the above points. Start with including the multiselect plugin.

Include jQuery MultiSelect Plugin

Here we 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.

Create a Select Box with HTML

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

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 use the below source code with jQuery library and CSS and JS of the plugin.

Code Highlights

  • On the first line we use the ID attribute of <select> tag.
  • Use MuliSelect function with the same ID attribute to convert simplete 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 plugin, now we can add a search option with jQuery MultiSelect Dropdown Checkbox With Search.

Here is the complete code and live view,

Live Demo:

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

MultiSelect Checkbox Select All

Here we use the same or above jQuery code to create multi-select but just include a new parameter 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.


Here we discuss 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 plugin here jQuery: MultiSelect › Projects › Patrick Springstubbe.

Happy Coding..!

Was this article helpful?
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH. I am a web Programmer by profession and working on more than 50 projects to date. Currently I am working on the web-based project and all the CMS and frameworks which are based on PHP.
Posts created 188

One thought on “jQuery Multi-Select Dropdown Checkbox With Search

  1. This doesn’t seem to work when there are multiple instances on a page – can you explain how to get that working?


Leave a Reply

Your email address will not be published.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top