Description:
In some
scenario, you may need to select multiple values on dropdown menu.
The browsers default multiselect do not allow you show
in good look and user friendly. Browsers default Multiselect shows ugly which
cann’t by styled via CSS.
To implement
user friendly multiple selections with good css styles on dropdown list, I have
used jquery multiselect plugin.
Steps:
1. Download Multiselect plugin.
You can download
from https://github.com/ehynds/jquery-ui-multiselect-widget
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.js"></script>
<link href="jquery-ui-1.10.3.custom" rel="Stylesheet"
type="text/css"
/>
<link href="jquery.multiselect.css"
rel="stylesheet"
type="text/css"
/>
<script src="jquery.multiselect.js"
type="text/javascript"></script>
<link href="style.css"
rel="stylesheet"
type="text/css"
/>
4. Add the 'Multiple' attribute to the
dropdownlistbox. This is mandatory.
<asp:DropDownList ID="ddlhobbies" runat="server" multiple="multiple">
</asp:DropDownList>
5. Once the document is ready, initialize multiselect
widget with the dropdown list.
$(document).ready(function
() {
$('#ddlhobbies').multiselect();
});
6. Use
hidden field to pass the selected values to the server side.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="jquery-1.10.2.js"
type="text/javascript"></script>
<script
type="text/javascript"
src="jquery-ui-1.10.3.custom.js"></script>
<link
href="jquery-ui-1.10.3.custom.css"
rel="stylesheet"
type="text/css"
/>
<link
href="jquery.multiselect.css"
rel="stylesheet"
type="text/css"
/>
<script
src="jquery.multiselect.js"
type="text/javascript"></script>
<link
href="style.css"
rel="stylesheet"
type="text/css"
/>
<script
type="text/javascript">
$(document).ready(function () {
$('#ddlhobbies').multiselect({
noneSelectedText: 'Select Hobbies',
header: true,
selectedList: 3
});
$("#btnGetHobbies").click(function () {
var
selectedhobbies = $("#ddlhobbies").val(); //Get the
selected hobbies
if
(selectedhobbies == null) {
alert("Select Hobbies");
return
false;
}
$('#hidhobbiese').val(selectedhobbies);
//Set the selected hobbies into hiddenfield
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:Label ID="lblhobbies" runat="server" Text="Select your Hobbies:"></asp:Label>
<asp:DropDownList ID="ddlhobbies" runat="server" multiple="multiple">
<asp:ListItem>Painting</asp:ListItem>
<asp:ListItem>Hunting</asp:ListItem>
<asp:ListItem>Yoga</asp:ListItem>
<asp:ListItem>Stamp
collecting</asp:ListItem>
<asp:ListItem>Modelling</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnGetHobbies" runat="server" Text="Get Hobbies" OnClick="btnGetHobbies_Click" />
<input id="hidhobbiese" type="hidden" size="1" runat="server" name="hidvalues" /><%--Add Hidden Field to store the selected hobbies--%>
</div>
</form>
</body>
</html>
Code
behind:
protected void
btnGetHobbies_Click(object sender, EventArgs e)
{
string
hobbies;
hobbies = hidhobbiese.Value;
//Store
all the selected hobbies in an array and extract each hobbies by using split
function
string[]
splitedvalues = hobbies.Split(',');
foreach
(string hobby in
splitedvalues)
{
//Here
you can get all the selected hobbies by using the splitedvalues array.
}
}
How to make
multiple select dropdown list using jQuery,Multi Select DropDownlist in
asp.net,Multiselect dropdown plugin in jquery, Multiple Selection
Dropdown,Getting values from multiple dropdown box,How to get multiple selected
dropdown values using jquery? Getting all selected dropdown values
0 comments:
Post a Comment