Multi-select Dropdown with Checkbox in jQuery

In this tutorial, we will see how we can convert normal select box dropdown to multi-select dropdown value with checkbox using jQuery.

The <select> tag is used to make a dropdown list. It is most often used in form to get the user input value. Using the <select> tag, you may ask users to select one value from the list OR you can allow users to select multiple values.

If you want to allow users to select multiple values then you have to pass a multiple attribute in the select tag. It is an in-built attribute to use for multiple selections. And to select the multiple values you have to hold the keyboard’s ctrl button and then click on the values.

But what if you don’t want users to hold the ctrl button and they can select directly multiple values? Then we apply this jquery solution to add checkboxes with each option of the select box. So users can select multiple values by checking each checkbox of options.

So in this tutorial, we will use jQuery to make a multi-select dropdown with a checkbox, instead of using a multiple attribute. jQuery multi-select plugin is very easy to use and user-friendly.

Let’s start making a multi-select dropdown with a checkbox using the jquery multiselect plugin.

Create HTML Select Box Dropdown List

We will use <select> tag to make HTML select box and <option> tag to make a dropdown list of select box. Let’s create a form that has a select box to select values, so you can clearly understand.

For example, let’s have a career form and in this form, we will create basic input fields like name, email, phone and one will be a select box to select the multiple skills.

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

In the above code, you see, we had a select box to select the multiple skills. And the select box has a name attribute like this name="skills[]". The square brackets ([ ]) are used to hold the multiple values and get these values in the backend as an array. So add the above code to your web page and don’t forget to save it.

jQuery Multiselect Plugin Librarys Files

Before integrating the jquery multiselect plugin, you need to include the plugin library files. Include the JS and CSS library of the jquery multiselect plugin. Make it work make sure you have also included the jQuery library (jquery.min.js).

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <script src="jquery.multiselect.js"></script> <link rel="stylesheet" href="jquery.multiselect.css">

You can download these libraries and then move them into your working folder then you can include them as the above example. If you don’t want to download then you can add CDN links. You will get these files in the download folder, so download the zip folder from the end of the tutorial.

Integrate jQuery Multiselect Plugin

In the last steps, we created a simple form that has a select box to select multiple values and included the plugin libraries. Now we will integrate the jQuery multi-select dropdown plugin to allow users can select multiple values through the checkbox.

jQuery multiselect plugin will make checkboxes for each option of the select box. It is easy to implement in any HTML form that has a select box. It is very user-friendly, so users couldn’t confused while selecting multiple values.

Initialize MultiSelect plugin

Call the multiselect() function to initialize the MultiSelect plugin. It will change the appearance of the select box. See the following example code of initialization.

$('select[name=skills]').multiselect();

There are many customizable options that you can use to enhance or customize the multi-select dropdown functionality. We will see some basic options that are mostly used while creating a multi-select dropdown select box with the checkbox.

jQuery MultiSelect with Checkboxes

Use the following code snippet to enable the checkbox option for the multi-select dropdown list.

$('select[name=skills]').multiselect({
    columns: 1,
    placeholder: 'Select skills'
});

jQuery MultiSelect with Search Option

If you want to enable the search option for the multi-select dropdown list then use the following code snippet. You have to add the option search and set the value as true.

It will add the search box at the first option of the dropdown list and you can search the options from the list. It is basically used when the dropdown list has many options like country, state, and city selection.

$('select[name=skills]').multiselect({
    columns: 1,
    placeholder: 'Select skills',
    search: true
});

jQuery MultiSelect With Select All Option

If you want to enable a global checkbox option that will select all options then you have to add the selectAll option as true. It will allow users to select all options together. So use the following code to enable this feature.

$('select[name=skills]').multiselect({
    columns: 1,
    placeholder: 'Select skills',
    search: true,
    selectAll: true
});

There are more options available to customize the select box dropdown list. You can check on the documentation page here.

Get Selected Options Value in PHP

So, we have a form that has a multi-select dropdown list and now we will get these values in PHP script. We will get all values that are selected by the checkbox.

As you know form has two main methods GET and POST and we are going to use the POST method in the form to pass the values as hidden. And will use the $_POST method to retrieve the values from the form.

We just have to pass the name of the select box that what we gave in the name attribute as skills. See the following code for reference.

$skills = $_POST['skills'];

You can print it using the print_r() function.

$skills = $_POST['skills'];

print_r($skills);

Output:

Array
(
    [0] => PHP
    [1] => CSS
    [2] => Java
    [3] => C++
)

Also Read: How to Add or Remove Input Fields Dynamically in jQuery?

Conclusion

So, we learned about how to convert a normal select box to a multi-select box to select multiple values. And integrated the select box with the jquery multi-select plugin to make a dropdown list with a checkbox.

Also, see some examples of a jquery multi-select plugin that can enhance the multi-select functionality. We see how to enable the select all option, enable the search option.

Hope you understand the tutorial, If you still have any questions or queries then please let me know in the comment section, I’ll respond to you as soon as possible.