Question

我想在ASP.Net WebForm DropDownList中对数据进行分组，因为它缺乏内置的分组支持。

我正在为下拉列表生成数据，如下所示。是否可以使用jQuery基于value和optgroup进行分组，以便它看起来像是一个适当的组下拉列表？

<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control ddCountry styled-select">
<option value="1" data-category="5">Project One</option>
<option value="2" data-category="6">Project Two</option>
<option value="3" data-category="0">Project Three</option>
<option value="4" data-category="5">Project Four</option>
<option value="5" data-category="0">General </option>
<option value="6" data-category="0">Cat 2 </option>
<option value="7" data-category="0">Cat 1</option>
<option value="8" data-category="7">Item 1</option>
<option value="9" data-category="7">Item 2</option>

</select>

期望输出

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

我设置了实际代码http://codepen.io/anon/pen/rjPYBV

Answer 1

我尝试使用CodeBehind以及jquery来解决这个问题，但我无法使其工作或获得所需的结果。所以我虽然使用CTE查询做类似的事情并将相同的数据传递给Dropdown。

WITH CTE(ID, ParentID, Name,  Depth, SortCol)  AS  ( 
SELECT ID, ParentID, Name, 0, CAST(ID AS varbinary(max)) 
FROM DonationForProject 
WHERE ParentID = 0 
UNION ALL
SELECT d.ID, d.ParentID, d.Name, p.Depth + 1, 
CAST(SortCol + CAST(d.ID AS binary(4)) AS varbinary(max)) 
FROM DonationForProject AS d 
JOIN CTE AS p 
ON d.ParentID = p.ID 
) 

SELECT ID, ParentID, Name,  Depth, REPLICATE('&nbsp;&nbsp;', Depth) + Name as HName 
FROM CTE
ORDER BY Name

我的优点是我不需要使用jquery或Code-behind做任何其他事情我只需使用下拉列表绑定数据

我正在使用 添加空间REPLICATE('  ', Depth)您也可以使用--，以使其看起来更具层次性。

<asp:dropdownlist Visible="true" ID="ddlOptionGroup" runat="server" CssClass="form-control" CausesValidation="True">  
</asp:dropdownlist>

代码背后

DataSet ds2 = DataProvider.GetHierarchicalForDD(1);

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

        foreach (DataRow drow in dt.Rows)
        {
            newItem = new ListItem(WebUtility.HtmlDecode(drow["HName"].ToString()), drow["ID"].ToString());
            newItem.Attributes["optgroup"] = drow["ParentID"].ToString();
            ddlOptionGroup.Items.Add(newItem);
        }

我对此有另一个要求，即用户也应该能够选择类别。通常情况并非如此，如果您将它们分组，就像下面的示例一样，您无法选择或传递类别或组的值

 <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

使用jQuery＆＃34; optgroup＆＃34;组下拉数据

1 个答案: