Multi-Select Dropdown with Checkbox using jQuery

admin | Posted on May 9, 2021 |

In this article, we’ll make the multi-select dropdown more user-friendly and provide a simple way to implement multiple select or multi-select dropdown lists with a checkbox using jQuery.

jQuery MultiSelect is a jQuery plugin that turns a multiselect list into a nice dropdown list with checkboxes. This plugin is easy to use and very useful in web form. Let’s start the tutorial on how to implement multiselect dropdown with checkbox in jQuery.

Include the following lines of code in the <head> section of your HTML.

<script src="https://scripts.guru/download/multiselect/jquery.min.js"></script>
<link href="https://scripts.guru/download/multiselect/jquery.multiselect.css" rel="stylesheet" />
<script src="https://scripts.guru/download/multiselect/jquery.multiselect.js"></script>

Html Code

<select multiple="" name="language[]" required=""  id="multiselect" >
    <option value="php">PHP</option>
    <option value="laravel">Laravel</option>
    <option value="codeigniter">Codeigniter</option>
    <option value="yii">Yii</option>
</select>

jQuery MultiSelect Basic Uses

<script>
    $('document').ready(function(){
          $('#multiselect').multiselect(); 
    });
</script>

jQuery MultiSelect With Search, Select all Option

<script>
    $('document').ready(function(){
        $('#multiselect').multiselect({
            columns: 1,
            placeholder: 'Select Framework',
            search: true,
            selectAll: true
        });
    });
</script>

jQuery MultiSelect With Optgroup

<script>
    $('document').ready(function(){
        $('#multiselect').multiselect({
            columns: 4,
            placeholder: 'Select Framework',
            search: true,
            selectAll: true
        });
    });
</script>

Complete page source here.

<!DOCTYPE html>
<html>
    <head>
        <title>Multiselect</title>
        <script src="https://scripts.guru/download/multiselect/jquery.min.js"></script>
        <link href="https://scripts.guru/download/multiselect/jquery.multiselect.css" rel="stylesheet" />
        <script src="https://scripts.guru/download/multiselect/jquery.multiselect.js"></script>
        <style>
            ul li{
                list-style: none;
            }
            </style>
    </head>
    <body>
        <select multiple="" name="language[]" required=""  id="multiselect" >
            <option value="php">PHP</option>
            <option value="laravel">Laravel</option>
            <option value="codeigniter">Codeigniter</option>
            <option value="yii">Yii</option>
        </select>
    </body>
<script>
    $('document').ready(function(){
        $('#multiselect').multiselect({
            columns: 1,
            placeholder: 'Select Framework',
            search: true,
            selectAll: true
        });
    });
</script>
</html>

Leave a Reply Cancel reply