Multi-select Dropdown List with Checkbox using jQuery

 Multiselect dropdown is very useful to allow the user to select multiple options in a selectbox. Multiple selections of the dropdown list can be added by using multiple attribute in the <select> tag. But in this case, multiple options can be selected by holding down the control (ctrl) button of the keyboard. Instead of using the multiple attributes in HTML, you can use jQuery to make the multi-select dropdown more user-friendly and add the checkbox to each option in the multi-select dropdown.

jQuery MultiSelect is a jquery plugin that turns a multiselect list into a nice and easy-to-use dropdown list with checkboxes. This plugin is the easiest way to change the interface of native select box elements and create multi select box with the checkbox. In this tutorial, we will show you how to convert HTML multi-select drop-down and integrate multiple select or multi-select dropdown list with checkbox using jQuery.

jQuery MultiSelect Plugin

We will use the MultiSelect Plugin to implement multiselect dropdown with checkbox in jQuery. In order to implement a multi-select dropdown list with checkboxes, you need to include the plugin library files.

Include the jQuery library and the JS & CSS library of the jQuery MultiSelect plugin.

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

Create Dropdown List / Select Box with HTML

The <select> element creates a drop-down list and <option> tags define the available options in this list. The multiple attribute allow selecting multiple options in the select box.

<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>

Add Checkboxes to Multi-select Drop-down List

Call the multiselect() method to initialize MultiSelect plugin.

$('select[multiple]').multiselect();

jQuery MultiSelect plugin provides various options to customize and enhance the multi-select dropdown functionality. Some mostly used multi-select dropdown example code snippets are given below.

jQuery MultiSelect with Checkboxes:
The following code adds checkboxes to options in multiselect dropdown.

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

jQuery MultiSelect With Search Option:
The following code enables the search/filtering on options in multiselect dropdown.

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

jQuery MultiSelect With Select All Option:
The following code adds select all text to options list in multiselect dropdown. It allows to check/uncheck all options at once.

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

jQuery MultiSelect With Optgroup:
The following code adds checkboxes to options group (<optgroup>) in multiselect dropdown.

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

Get Selected Options Value using PHP

When the multiple checkboxes value is submitted via an HTML form, you can retrieve the selected options value through normal GET or POST methods. The following code shows how you can get multiple selected values of the select box using the $_POST method in PHP.

$selectedOptions = $_POST['langOpt'];