jQuery "optgroup"を使用したグループ化のドロップダウンデータ

Question

グループ化をサポートしていないASP.Net WebForm DropDownListでデータをグループ化したい。

私は以下のようにドロップダウンのデータを生成しています。 valueとoptgroupに基づいてグループ化することは、jQueryを使用してグループとの適切なドロップダウンのように見えますか？

<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 

私は、私もjQueryのよう分離コードを使用してこの問題を解決することを試みたが、私はそれを動作させることができませんでしたhttp://codepen.io/anon/pen/rjPYBV

Answer 1

実際のコードでセットアップフィドルを持っていますまたは所望の結果を得ることができる。だから私は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('  ', Depth) + Name as HName 
FROM CTE 
ORDER BY Name 

私はこれを持っている利点は、私はjqueryのを使用して他に何もする必要はありませんか、コードビハインド私は単に私が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>