Saturday, 23 December 2017

Dropdown with Multi Select (Multiple selection) with checkbox using jQuery, Bootstrap and Multiselect JS

In this tutorial, I am going to explain you how to implement multiple selection (MultiSelect) with dropdown (select option in html) using CheckBox with help of jQuery, Bootstrap and MultiSelect JS.

In HTML File

In html file, create a select list (dropdown) with multiple="multiple" and bind with some dummy data as shown below.
Here in script JS files, First file is jQuery file Second, Third is bootstrap JS, CSS files and Fourth, Fifth file is MultiSelect JS and CSS Files.
Make sure all files is loaded when application runs.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
</head>
<body>
    <div style="width: 385px; height: auto; border: 1px solid red; margin-top: 50px; margin-left: 150px; padding: 5px;">
        <table>
            <tr>
                <td><b>Country List</b></td>
                <td>
                    <select id="Country" multiple="multiple">
                        <option value="1">India</option>
                        <option value="2">USA</option>
                        <option value="3">UK</option>
                        <option value="4">Australia</option>
                    </select>
                </td>
                <td>
                    <input type="button" id="btnSave" value="Click Here" class="btn btn-success btn-md" />
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        $(function () {
            $('#Country').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
    <script>
        $('#btnSave').click(function () {
            var country = $("#Country option:selected");
            var message = "";
            country.each(function () {
                message += $(this).val() + " " + $(this).text() + "\n";
            });
            alert(message);
        });
    </script>
</body>
</html>

After running application, output can be seen as below.
Dropdown with Multi Select (Multiple selection) with checkbox using jQuery, Bootstrap and Multiselect JS
Now select items and click on "Click Here" button, you can select selected item's value and Text in alert.
Iterationg over dropdown item using jQuery
Iterationg over dropdown item using jQuery and showing in alert

As you can see in above figure, there is Select all option included, you can remove Select all option by setting includeSelectAllOption to false or by removing includeSelectAllOption as shown below.

<script type="text/javascript">
    $(function () {
        $('#Country').multiselect({
            includeSelectAllOption: false
        });
    });
</script>

To make all the items selected by default, add changes as shown below.

<script type="text/javascript">
    $(function () {
        $('#Country').multiselect({
            includeSelectAllOption: false,
        });
        $("#Country").multiselect('selectAll', false);
        $("#Country").multiselect('updateButtonText');
    });
</script>
As you can see below, all the items are selected by-default.
Select all items in dropdown by default using jQuery
Share:

0 comments:

Post a Comment

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive

Ads By Chitika