使用代码隐藏或jQuery解决方案的Asp.net Web窗体DropdownList与组

这个问题已经在这里有了答案：            >            How can I add option groups in ASP.NET drop down list?                                    10个
我想在ASP.NET WebForm中的DropDownList中对数据进行分组

来自数据库表的下拉拉数据,下面是表中的样本数据

ID      Name                CatID   
1       Project One         1           
2       Project Two         1         
3       Project Three       2           
4       Project Four        2           
5       General             3           
6       Cat 1               1
7       Cat 2               2
8       Cat 3               3

我尝试了几种直接从Code背后进行操作的方法,但是它没有按预期工作.

我也尝试使用以下example来实现相同的jquery,但它具有静态条件值,因此这将无法工作

下面是我现在的代码

public void getDonationForDDGrouping()
{
    sqlConnection con = new sqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["sqlConnectionString"].ToString());
    if (con.State == ConnectionState.Closed)
    {
        con.open();
    }
    sqlCommand cmd = new sqlCommand("select ID, Name, CatID from Project ", con);
    cmd.ExecuteNonQuery();
    sqlDataAdapter adp = new sqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    adp.Fill(ds);
    con.Close();

    ListItem newItem;
    DataTable dt = new DataTable();
    dt = ds.Tables[0];


    foreach (DaTarow drow in dt.Rows)
    {
        newItem = new ListItem(drow["Name"].ToString(), drow["ID"].ToString());
        newItem.Attributes["OptionGroup"] = drow["ParentID"].ToString();
        ddlOptionGroup.Items.Add(newItem);
    }
}

如何使用或不使用jQuery将它们分组.最好从代码后面做所有事情

所需的输出

Cat 1
--Item 1
--item 2
Cat 2
--
General
--Project Two
General
--Project One
--Project Four
--Project Three
Project One

解决方法:

在服务器端按如下所示更改代码,

foreach (DaTarow drow in dt.Rows)
    {
        newItem = new ListItem(drow["Name"].ToString(), drow["ID"].ToString());
        newItem.Attributes["data-category"] = drow["ParentID"].ToString();//Instead of ID, Pass Category Name.
        ddlOptionGroup.Items.Add(newItem);
    }

在客户端使用Jquery,

   var groups = {};
$("select option[data-category]").each(function () {
     groups[$(this).attr("data-category")] = true;
});

$.each(groups, function (c) {
     $("select option[data-category='"+c+"']").wrapAll('<optgroup label="' + $("select option[data-category='"+c+"']").html() + '">');
});