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 DemoRelated Links:
FAQs
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.
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.
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.
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.
Thanks you for this article is very hep full; bat i have question :How can do hide options in a select list using jQuery?
To hide the specific option use this
$("select option[value="value"]").hide();
And if you want to hide all then use$("select option").hide();
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 !!!!
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)
})
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);
});
});