how to create multiselect dropdown with checkbox using Bootstrap multiselect Jquery plugin - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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>




What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+

1 comments:


EmoticonEmoticon