<optgroup> Not working in jQuery Dropdown
- by Santhosh Kumar
I have a asp:dropdownlist which i have changed to jQuery multiselect. I have to group the data inside the dropdown. I am grouping this in runtime.If it is a normal asp dropdown its working. When applying jquery Multiselect its dosen't.
Source:
<link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="Styles/style.css" />
<link rel="stylesheet" type="text/css" href="Styles/prettify.css" />
<%--<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>--%>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.multiselect.js"></script>
<script type="text/javascript" src="Scripts/jquery.multiselect.filter.js"></script>
<script type="text/javascript" src="Scripts/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Create groups for dropdown list
$("option[classification='LessThanFive']").wrapAll("<optgroup label='Less Than Five' />");
$("option[classification='GreaterThanFive']").wrapAll("<optgroup label='Greater Than five' />");
});
</script>
<asp:DropDownList ID="MobileData" runat="server" OnDataBound="ddl_DataBound">
</asp:DropDownList>
//Code Behind:
protected void ddl_DataBound(object sender, EventArgs e)
{
foreach (ListItem item in ((DropDownList)sender).Items)
{
if (System.Int32.Parse(item.Value) < 2)
item.Attributes.Add("classification", "LessThanFive");
else
item.Attributes.Add("classification", "GreaterThanFive");
}
}
protected void Page_Load(object sender, EventArgs e)
{
ListItemCollection list = new ListItemCollection();
list.Add(new ListItem("1", "1"));
list.Add(new ListItem("2", "2"));
list.Add(new ListItem("3", "3"));
list.Add(new ListItem("4", "4"));
list.Add(new ListItem("5", "5"));
list.Add(new ListItem("6", "6"));
list.Add(new ListItem("7", "7"));
list.Add(new ListItem("8", "8"));
list.Add(new ListItem("9", "9"));
list.Add(new ListItem("10", "10"));
MobileData.DataSource = list;
MobileData.DataBind();
}
Where i'm wrong?
