HOW TO MULTISELECT DROPDOWN WITH CHECKBOX USING JQUERY

HOW TO MULTISELECT DROPDOWN WITH CHECKBOX USING JQUERY

HOW TO MULTISELECT DROPDOWN WITH CHECKBOX USING JQUERY

0 Sales

Free

Multiselect is useful to allow multiple choices in a select box to be selected by the user. Using multiple attributes in the < select > tag, multiple drop-down list selections can be added. But in this case, by holding down the control (ctrl) key, multiple options can be picked. You can use jQuery instead of using the different attributes in HTML to make the multi-select dropdown more user-friendly and add the checkbox to the multi-select dropdown.

 

JQuery MultiSelect is a jquery plugin that turns a multiselect list into a nice, easy-to-use drop-down checkbox list. This plugin is the simplest way to change the native select box component interface and use checkbox to build multi-select box. We'll show you in this tutorial how to convert multi-select drop-down HTML and integrate multiple select or multi-select drop-down list with jQuery checkbox.

 

jQuery MultiSelect Plugin

To implement multiselect dropdown with checkbox in jQuery, we will use the MultiSelect Plugin. You need to include the plugin library files in order to implement multi-select dropdown list with checkboxes.

 

Include the jQuery MultiSelect app and jQuery library's CSS & JS package.

 

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- MultiSelect CSS & JS library -->

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

<script src="multiselect/jquery.multiselect.js"></script>

 

Dropdown List / Select Box HTML


 

The element < select > creates a drop-down list and tags in this list define the options available. Multiple attributes allow multiple options to be selected 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>


 

JavaScript

To initialize the MultiSelect plugin, call the multiselect() method. 

 

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


 

JQuery MultiSelect plugin offers a variety of options for customizing and enhancing multi-select dropdown. Some snippets of code, mostly used multi-select dropdown, are given below.

 

Checkbox jQuery MultiSelect:

 

The following code adds checkboxes to the multi-select drop-down options.

 

$('#langOpt').multiselect({

    columns: 1,

    placeholder: 'Select Languages'

});


 

jQuery MultiSelect With Search Option:

 

The following software allows multi-select dropdown search / filtering of choices.

 

$('#langOpt').multiselect({

    columns: 1,

    placeholder: 'Select Languages',

    search: true

});


 

jQuery MultiSelect With Select All Option:

 

The following code adds all the text in the multiselect dropdown to the list of options. It allows all choices to be checked / unchecked at once.

 

$('#langOpt').multiselect({

    columns: 1,

    placeholder: 'Select Languages',

    search: true,

    selectAll: true

});


 

jQuery MultiSelect With Optgroup:

 

In multiselect dropdown, the following code adds checkboxes to the set of options (< optgroup >).

 

$('#langOptgroup').multiselect({

    columns: 4,

    placeholder: 'Select Languages',

    search: true,

    selectAll: true

});




 

Get Selected Options Value using PHP

 

Using normal GET or POST methods, you can retrieve the selected options value when the value is submitted in a form. The following code shows how to use the $POST method in PHP to get multiple selected values from the select box.

 

$selectedOptions = $_POST['langOpt'];

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 14, 2020

Updated Date : May 14, 2020

Ratings

Comments : 0

Downloads : 0