Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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 Listb>td>
                td>
                    select id="Country" multiple="multiple">
                        option value="1">Indiaoption>
                        option value="2">USAoption>
                        option value="3">UKoption>
                        option value="4">Australiaoption>
                    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.
Now select items and click on "Click Here" button, you can select selected item's value and Text 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.


This post first appeared on ASPArticles, please read the originial post: here

Share the post

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

×

Subscribe to Asparticles

Get updates delivered right to your inbox!

Thank you for your subscription

×