Multi-select Dropdown List with Checkbox using jquery

Table of Contents

Multiselect dropdown is very useful to permit the user to select multiple options during a select box.
Multiple selections of the dropdown list can be added by using multiple attribute within the <select> tag.
But in this case, multiple options are selected by holding down the control (ctrl) button of the keyboard.
Rather than using the multiple attributes in HTML, you’ll use jQuery to form the multi-select dropdown more user-friendly and add the checkbox to every option within the multi-select dropdown.
jQuery multi select may be a jQuery plugin that turns a multi select list into a nice and straightforward to use a dropdown list with checkboxes.
This plugin is that the easiest method to vary the interface of native select box elements and make multi select box with the checkbox.
During this tutorial, we’ll show you ways to convert HTML multi-select drop-down and integrate multiple select or multi-select dropdown list with checkbox using jQuery.

jQuery multi select Plugin

We will use the multi select Plugin to implement multi select dropdown with checkbox in jQuery.
So as to implement a multi-select dropdown list with checkboxes, you would like to incorporate the plugin library files.
Include the jQuery library and therefore the JS & CSS library of the jQuery multi select 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 tags define the available options during this list.
The multiple attribute allow selecting multiple options within 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 directly.

$('#langopt').multiselect({
    Columns: 1,
    Placeholder: 'Select Languages',
    Search: true,
    Selectall: true
});

jQuery multiselect With Optgroup:

The following code adds checkboxes to options group () 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’ll retrieve the chosen options value through normal GET or POST methods.
The following code shows how you’ll get multiple selected values of the select box using the $_POST method in PHP.