7 Examples of jQuery Multi-select Dropdown with Checkboxes Plug-in

The multi-select and checkboxes

You might have seen or used multi-select dropdowns in web projects where a user may select multiple choices from the given set of options.

In this tutorial, I am going to show you a jQuery plugin that not only allows selecting multiple options but the options are presented as checkboxes. So, as the dropdown is clicked, the options are opened with checkboxes. A user may check or uncheck any option that will also appear in the box.

The plug-in name is jQuery MultiSelect which you may download at Github website here.

See the following demos to learn how it works and how you may use this in your own web projects.

A demo of using multi-select with checkboxes

In this example, four columns multi-select dropdown with checkboxes is created. As you click the dropdown, the US State names will appear with checkboxes. Select a few State names and also see how it is added in the text bar.

jQuery multi select checkbo

Online demo and code

For creating this dropdown with checkboxes, first of all, include the CSS library in the <head> section that comes with the plug-in:

<link href=”css/jquery.multiselect.css” rel=”stylesheet” type=”text/css”>

In the markup section just create a normal dropdown by <select> tag with options:

<select name=”multicheckbox[]” multiple=”multiple” class=”4colactive”>

Include the jQuery and JS file of the plug-in before the </body> tag.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

<script src=”js/multiselect-checkbox/jquery.multiselect.js”></script>

Finally, use the jQuery code for plug-in with options, for example:

<script>

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

columns: 4,

placeholder: 'Select options'

});

</script>

A demo of two columns multi-select

This is almost the same example as above except I specified two columns in the <script> part rather than four. See the demo and code online:

jQuery multi select checkbox two-columns

Complete code with jQuery

<!DOCTYPE html>
<html>
<head>

    <link href="css/jquery.multiselect.css" rel="stylesheet" type="text/css">

</head>

<body>

<h2>A demo of using multi-select with checkboxes</h2>
    <select name="multicheckbox[]" multiple="multiple" class="4colactive">
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA" selected="selected">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/multiselect-checkbox/jquery.multiselect.js"></script>
<script>
$('select[multiple]').multiselect({
    columns: 2,
    placeholder: 'Select options'
});
</script>
</body>
</html>

That is the columns: 2 option. You may use the number of columns as fits with the design and number of choices.

A demo of using options groups in multi-select

If you have options in a categorized way, for example, web -> HTML, JavaScript, CSS etc. and High-level languages like Java, Python etc. in the multi-select dropdown, this is how you may present it with this plug-in:

jQuery multi select option group

Code:

<!DOCTYPE html>
<html>
<head>

    <link href="css/jquery.multiselect.css" rel="stylesheet" type="text/css">

</head>

<body>

<h2>A demo of using multi-select with checkboxes</h2>
    <select name="basicOptgroup[]" multiple="multiple" class="2col active">
            <optgroup label="Web">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="CSS3">CSS3</option>
                <option value="jQuery">jQuery</option>
                <option value="JavaScript">JavaScript</option>
            </optgroup>
            <optgroup label="High Level Languages">
                <option value="Java">Java</option>
                <option value="Python">Python</option>
            </optgroup>
            <option value="cpp">C++</option>
    </select>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/multiselect-checkbox/jquery.multiselect.js"></script>
<script>
$('select[multiple]').multiselect({
    columns: 2,
    placeholder: 'Select options'
});
</script>
</body>
</html>

You can see the complete code in the demo page with <select> tag using option groups.

Styling the dropdown with checkboxes

You may style the multi-select dropdown and its text by using the power of CSS. In this example, the Bootstrap CSS file is included in the <head> section and applied in the dropdown.

You can see the difference between the first and this example:

jQuery multi select style

Code:

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link href="css/jquery.multiselect.css" rel="stylesheet" type="text/css">

</head>

<body>
<div class="container">
<h2>A demo of using multi-select with checkboxes</h2>
    <select name="multicheckbox[]" multiple="multiple" class="4col active">
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA" selected="selected">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/multiselect-checkbox/jquery.multiselect.js"></script>
<script>
$('select[multiple]').multiselect({
    columns: 4,
    placeholder: 'Select options'
});
</script>
</body>
</html>

A demo of changing the color of selected options

For the selected options and the choices that a user hover can be highlighted by a different color to clearly show what has been selected.

For that, you simply need to override the ms-options-wrap > .ms-options > ul classes related to li and label. See the following demo where I have changed the background color of the hovered and selected options:

jQuery multi select hover

Online demo and code

Only this code is added in the <style> section that overridden the default classes in the plug-in’s CSS file:

.ms-options-wrap > .ms-options > ul li.selected label,

.ms-options-wrap > .ms-options > ul label:hover {

background-color: #63B1B1;

}

Another style with selected and unselected options

See another style in this demo where unselected options’ properties are also changed.

jQuery multi select CSS

Complete code with CSS and jQuery

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link href="css/jquery.multiselect.css" rel="stylesheet" type="text/css">

<style>
.ms-options-wrap > .ms-options > ul label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 4px;
    margin: 1px 0;
    background-color: #9DCEFF;
    
}

.ms-options-wrap > .ms-options > ul li.selected label,
.ms-options-wrap > .ms-options > ul label:hover {
    background-color: #003A75;
    color:#fff;
}
</style>

</head>

<body>
<div class="container">
<h2>A demo of using multi-select with checkboxes</h2>
    <select name="multicheckbox[]" multiple="multiple" class="4col formcls">
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA" selected="selected">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/multiselect-checkbox/jquery.multiselect.js"></script>
<script>
$('select[multiple]').multiselect({
    columns: 4,
    placeholder: 'Select options'
});
</script>
</body>
</html>

Similarly, you may pick other classes for textbox or even checkbox and modify to style as you want.

A demo with selectall options

By specifying the selectAll option as true, you may add the option to select all options in the dropdown.

jQuery multi select all

The script:

<script>
$('select[multiple]').multiselect({
    columns: 2,
    placeholder: 'Select options',
    selectAll : true
});
</script>

You may check other options by visiting the documentation of the plug-in.