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.7.0/jquery.min.js"></script>

<!-- JS & CSS library of MultiSelect plugin -->
<script src="js/multiselect/jquery.multiselect.js"></script>
<link rel="stylesheet" href="js/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 with single column list.

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

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

$('#langOpt').multiselect({
    columns: 1,
    texts: {
        placeholder: 'Select Languages',
        search     : 'Search 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,
    texts: {
        placeholder: 'Select Languages',
        search     : 'Search Languages'
    },
    search: true,
    selectAll: true
});

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

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

jQuery MultiSelect With Maximum Limit of Selected Options:
The following code snippet shows how can you add a maximum selection limit restriction in multiselect dropdown.

$('#langOpt').multiselect({
    columns: 3,
    texts: {
        placeholder: 'Select Languages (max 3)',
        search     : 'Search Languages'
    },
    search: true,
    onOptionClick: function( element, option ) {
        var maxSelect = 3;

        // too many selected, deselect this option
        if( $(element).val().length > maxSelect ) {
            if( $(option).is(':checked') ) {
                var thisVals = $(element).val();

                thisVals.splice(
                    thisVals.indexOf( $(option).val() ), 1
                );

                $(element).val( thisVals );

                $(option).prop( 'checked', false ).closest('li')
                    .toggleClass('selected');
            }
        }
        // max select reached, disable non-checked checkboxes
        else if( $(element).val().length == maxSelect ) {
            $(element).next('.ms-options-wrap')
                .find('li:not(.selected)').addClass('disabled')
                .find('input[type="checkbox"]')
                    .attr( 'disabled', 'disabled' );
        }
        // max select not reached, make sure any disabled
        // checkboxes are available
        else {
            $(element).next('.ms-options-wrap')
                .find('li.disabled').removeClass('disabled')
                .find('input[type="checkbox"]')
                    .removeAttr( 'disabled' );
        }
    }
});

Load Options Dynamically in Multiselect Dropdown:
You can load the multi-select dropdown options dynamically using the loadOptions method.

$('#langOpt').multiselect( 'loadOptions', [{
    name   : 'Option Name 1',
    value  : 'option-value-1',
    checked: false,
    attributes : {
        custom1: 'value1',
        custom2: 'value2'
    }
},{
    name   : 'Option Name 2',
    value  : 'option-value-2',
    checked: false,
    attributes : {
        custom1: 'value1',
        custom2: 'value2'
    }
},{
    name   : 'Option Name 3',
    value  : 'option-value-3',
    checked: false,
    attributes : {
        custom1: 'value1',
        custom2: 'value2'
    }
}]);

Reload Multiselect Dropdown:
Use the reload method to reload multiselect dropdown in case the options are modified after the plugin initialization.

$('#langOpt').multiselect('reload');

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.

HTML Code:

<form method="post">
    <!-- Multi-select dropdown -->
    <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>

    <!-- Submit button -->
    <input type="submit" name="submit" value="Submit">
</form>

JavaScript Code:

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

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

<script>
$('#langOpt').multiselect();

</script>

PHP Code:
Use $_POST method to get the selected option values in an array format using PHP.

<?php 
 
if(isset($_POST['submit'])){ 
    // Get the selected options 
    $selectedOptions_arr = $_POST['langOptgroup']; 
     
    // Render selected options array 
    print_r($selectedOptions_arr); 
} 
 
?>

Dynamic Dependent Select Box using jQuery, Ajax and PHP