Sunday, December 4, 2016

how to create multiselect dropdown with checkbox using Bootstrap multiselect Jquery plugin

In this article I am going to explain how to create multiselect dropdown with checkbox using Bootstrap multiselect Jquery plugin.

how to create multiselect dropdown with checkbox using Bootstrap multiselect Jquery plugin


Description:
In previous article I have explained about Dropdowncheckboxes DLL to create multiselect dropdown. Here is another option to create the same, we can use the Bootstrap multiselect Jquery plugin.

Implementation:
You can download the Multiselect Jquery Plugin from HERE.
Or you can use the CDN of Bootstrap and Multiselect Jquery and CSS.

HTML Markup of webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Multiselect Dropdown checkboxes Tutorial</title>
           
<%-- cdn of jquey and css--%>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#state').multiselect({ includeSelectAllOption: true,enableFiltering: true });
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="">
    <fieldset style="margin-left:450px;width:35%;height:160px">
    <legend>Example of Dropdown checkbox</legend>
    <table>
    <tr><td>Select State : </td><td> <select id="state" multiple="multiple">
      <option value="1">Himachal Pradesh</option>
    <option value="2">Punjab</option>
    <option value="3">Haryana</option>
    <option value="4">Chandigarh</option>
    <option value="5">Delhi</option>
    <option value="6">Bihar</option>
     <option value="7">UP</option>
      <option value="8">Kerla</option>
</select></td><td>
       </td></tr>
     <tr><td></td><td></td><td></td></tr>
    </table> 
    </fieldset>
    </div>
    </form>
</body>
</html>




1 comment: