Here I have created sample.When we use DropDown we need to set attribute multiple="multiple".
HTML
<div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></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 () {
$('[id*=ddlFruits]').multiselect({
includeSelectAllOption: true
});
});
</script>
<asp:DropDownList ID="ddlFruits" runat="server" multiple="multiple">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Guava" Value="4" />
<asp:ListItem Text="Orange" Value="5" />
</asp:DropDownList>
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Save" />
<br />
<br />
<asp:GridView ID="gvFruits" runat="server" AutoGenerateColumns="true" />
</div>
</div>
C#
protected void Save(object sender, EventArgs e)
{
DataTable FruitTable = new DataTable();
FruitTable.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("FruitID", typeof(int)) });
int selectedFruitsCount = 1;
foreach (ListItem item in ddlFruits.Items)
{
if (item.Selected)
{
FruitTable.Rows.Add(selectedFruitsCount, item.Value);
selectedFruitsCount++;
}
}
// Write code to save into Database.
gvFruits.DataSource = FruitTable;
gvFruits.DataBind();
}
Screenshot
