Home > jQuery > Multi-select Dropdown with Checkbox in jQuery

Multi-select Dropdown with Checkbox in jQuery

In this tutorial, we will see how we can convert a normal select box dropdown to a multi-select dropdown value with a 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> a tag to make an HTML select box and <option> a tag to make a dropdown list of the 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. 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 Library 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).

<!-- 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="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++
)

Conclusion

So, we learned about how to convert a normal select box to a multi-select box to select multiple values. 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 and 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, and I’ll respond to you as soon as possible.

View Demo

FAQs

How can I implement a multi-select dropdown with checkboxes using jQuery?

Utilize plugins like Multiselect, Chosen, or Select2 in jQuery by including the library and initializing the <select> element with the plugin. Enable the multiple selection option and checkboxes for an interactive user experience.

What is the method to retrieve selected values from a multi-select dropdown with checkboxes using jQuery?

Retrieve selected values with the jQuery .val() method, which returns an array of selected options. Iterate through this array to handle and process the selected values as needed.

Is it possible to dynamically populate a multi-select dropdown with checkboxes using jQuery?

Yes, dynamically populate options using jQuery’s .append() or .html() methods. Add <option> elements with values and text, facilitating dynamic data loading from sources like databases.

How can I customize the appearance of a multi-select dropdown with checkboxes using jQuery?

Customize appearance through CSS styling, targeting specific classes generated by the plugin. Tailor the look of the dropdown, checkboxes, and other elements according to your preferences.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

5 thoughts on “Multi-select Dropdown with Checkbox in jQuery”

  1. Hola Aman !!!!, necesito me digas como hacer con jquery que me muestre en un lo seleccionado cuando hago un click sobre el checkbox, muchas gracias !!!!

    Reply
    • Hi Daniel, as I understand your query using google translator is that you are looking for code to print the selected values.Plz try this code and hope it will helpful for you.


      $('#button-test').on('click', function() {
      //alert('test');
      var selectedVal = [];
      $("li.checked").each(function() {
      var this_val = $(this).children('input').val();
      selectedVal.push(this_val);
      });
      //console.log(selectedVal)
      })

      Reply
  2. Por ejemplo acá:
    $(‘QUE SELECTOR TENGO QUE PONER ACA????).on(‘click’, function () {
    alert(“ok”);
    $(“li.checked”).each(function(){
    alert($(this).children(‘input’).val());
    //alert($(this).children(‘label’).val());
    var nombre = $(this).children(‘label’).val();

    $(‘#listado’).val(nombre);
    });
    });

    Reply

Leave a Comment