In
this article I am going to explain how to create multiselect dropdown with
checkbox using Bootstrap multiselect Jquery plugin.
In
the previous article I have explained how to populate and validate theDropdowncheckbox custom control in asp.net, how to create Dropdownlist withcheckboxes in asp.net and how to show default text instead of empty cell inangular UI-grid.
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>
.png)
nyc
ReplyDelete