Multi-select Dropdown List with Checkbox using jQuery


Multiple selections of the dropdown list can be available by adding multiple Attribute in <select> tag. In that case, multiple options can be selected by holding down the control (ctrl) button. In this article, we’ll make the multi-select dropdown more user-friendly and provide the simple way to implement multiple select or multi-select dropdown list with checkbox using jQuery.

jQuery MultiSelect is a jQuery plugin that turns a multiselect list into a nice dropdown list with checkboxes. This plugin is easy to use and very useful in web form. Let’s start the tutorial on how to implement multiselect dropdown with checkbox in jQuery.

In order to implement multiselect dropdown list with checkboxes, you need to include two files (jquery.multiselect.css and jquery.multiselect.js) of the jQuery MultiSelect plugin and jQuery library (jquery.min.js).

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

Please note that, jquery.multiselect.js file need to be placed after the <select> HTML.

Dropdown List HTML

<select> element creates a drop-down list and <option> tags defines the available options in this list. multiple attributes allow selecting multiple options.

<select name="langOpt[]" multiple id="langOpt"> <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> 

JavaScript Code

Write some JavaScript code to select the dropdown list and define the options in multiselect({});

Basic and advanced (Search, Select All, and Optgroup) uses example code is provided below.

jQuery MultiSelect Basic Uses:

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

jQuery MultiSelect With Search Option:

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

jQuery MultiSelect With Select All Option:

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

jQuery MultiSelect With Optgroup:

$('#langOptgroup').multiselect({     columns: 4,     placeholder: 'Select Languages',     search: true,     selectAll: true }); 

Get Selected Options using PHP

Once the form is submitted, you can get the selected options as an array by using the following code.


Related Articles

Comments 1