In this tutorial, I am going to explain you how to implement multiple selection (MultiSelect) with ListBox control using CheckBox in ASP.NET with help of jQuery, Bootstrap and MultiSelect JS.
In ASPX File
In aspx file, create a ListBox control with SelectionMode="Multiple" and bind with some dummy ListItem data as shown below.
Here in script JS files, First is jQuery file and Second, Third is bootstrap JS and CSS files and Fourth and Fifth file is MultiSelect JS and CSS Files.
Make sure all files is loaded when application runs.
Here includeSelectAllOption is set to true to include Select All text at first position in Select List.
@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
DOCTYPE html>
html xmlns="http://www.w3.org/1999/xhtml">
head runat="server">
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>
script type="text/javascript">
$(function () {
$('#lbCountry').multiselect({
includeSelectAllOption: true
});
});
script>
head>
body>
form id="form1" runat="server">
div style="width: 500px; height: auto; border: 1px solid red; margin-top: 50px; margin-left: 150px; padding: 5px;">
table>
tr>
td>b>Country Listb>td>
td>
asp:ListBox ID="lbCountry" runat="server" SelectionMode="Multiple">
asp:ListItem Text="India" Value="1">asp:ListItem>
asp:ListItem Text="USA" Value="2">asp:ListItem>
asp:ListItem Text="UK" Value="3">asp:ListItem>
asp:ListItem Text="Australia" Value="4">asp:ListItem>
asp:ListBox>
td>
td>
asp:Button ID="btnSave" Text
