Here I have created sample that will help you out.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
GroupDropdownlist('ddlCategories')
});
function GroupDropdownlist(id) {
var selectControl = $('#' + id);
var groups = [];
$(selectControl).find('option').each(function () {
groups.push($(this).attr('data-group'));
});
var uniqueGroup = groups.filter(function (itm, i, a) {
return i == a.indexOf(itm);
});
$(uniqueGroup).each(function () {
var Group = jQuery('<optgroup/>', {
label: $(this)[0]
}).appendTo(selectControl);
var grpItems = $(selectControl).find('option[data-group="' + $(this)[0] + '"]');
$(grpItems).each(function () {
var item = $(this);
item.appendTo(Group);
});
});
}
</script>
</head>
<body>
<div>
<select name="ddlCategories" id="ddlCategories">
<option value="1" data-group="Science">BSC-IT</option>
<option value="2" data-group="Science">BSC-CS</option>
<option value="3" data-group="Science">BSC</option>
<option value="4" data-group="Commerce">BCOM-Marketing</option>
<option value="5" data-group="Commerce">BCOM-Finance</option>
<option value="6" data-group="Arts">BA</option>
<option value="6" data-group="Arts">MA</option>
</select>
</div>
</body>
</html>
Demo
ASPX
<div>
<%--Note : Use same script used in HTML Sample Here--%>
<asp:DropDownList ID="ddlCategories" runat="server">
</asp:DropDownList>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("SubCategoryId"), new DataColumn("SubCategoryName"), new DataColumn("CategoryName") });
dt.Rows.Add("1", "BSC-IT", "Science");
dt.Rows.Add("2", "BSC-CS", "Science");
dt.Rows.Add("3", "BSC", "Science");
dt.Rows.Add("4", "BCOM-Marketing", "Commerce");
dt.Rows.Add("5", "BCOM-Finance", "Commerce");
dt.Rows.Add("6", "BA", "Arts");
dt.Rows.Add("6", "MA", "Arts");
foreach (DataRow row in dt.Rows)
{
ListItem item = new ListItem();
item.Text = row["SubCategoryName"].ToString();
item.Value = row["SubCategoryId"].ToString();
item.Attributes["data-group"] = row["CategoryName"].ToString();
ddlCategories.Items.Add(item);
}
}
}
VB
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("SubCategoryId"), New DataColumn("SubCategoryName"), New DataColumn("CategoryName")})
dt.Rows.Add("1", "BSC-IT", "Science")
dt.Rows.Add("2", "BSC-CS", "Science")
dt.Rows.Add("3", "BSC", "Science")
dt.Rows.Add("4", "BCOM-Marketing", "Commerce")
dt.Rows.Add("5", "BCOM-Finance", "Commerce")
dt.Rows.Add("6", "BA", "Arts")
dt.Rows.Add("6", "MA", "Arts")
For Each row As DataRow In dt.Rows
Dim item As New ListItem()
item.Text = row("SubCategoryName").ToString()
item.Value = row("SubCategoryId").ToString()
item.Attributes("data-group") = row("CategoryName").ToString()
ddlCategories.Items.Add(item)
Next
End If
End Sub
