使用选定的 jquery 在 ListBox 的代码隐藏中填充 ListBox

Question

我正在使用Web表单（ASP.NET/C#）编写Web应用程序。我有一个使用jquery插件的ListBox控件，已选择。 我使用数据库调用填充代码隐藏中的列表框。 它工作正常，所以我想将组添加到列表框中。 数据显示在列表中，而不是按我设置的组显示。
我相信问题出在所选的查询插件上。 我可能需要以某种方式设置此插件的选项，但我还没有看到任何有关如何执行此操作的文档。这是我的javascript/HTML代码：

<script type="text/javascript">
     $(document).ready(function () {
         $(".chosen-select").chosen({
             search_contains: true,
             no_results_text: "Sorry, no match!",
             allow_single_deselect: true
         });
         $('.chosen-container').css('width', '600px');
     });
</script>
 <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"
                    data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
        </asp:ListBox>

这是我用于填充列表框的 C# 代码：

foreach (DataRow row in m_dtRecipients.Rows)
{
     ListItem recItem = new ListItem(row["Name"].ToString(), row["ID"].ToString());
     if (row["UserID"].ToString().Equals("Global"))
     {
         recItem.Attributes[OPT_GROUP_ATTRIBUTE] = GLOBAL_GROUP;
     }
     else if (row["UserID"].ToString().Equals(m_strUserID))
     {
         recItem.Attributes[OPT_GROUP_ATTRIBUTE] = PERSONAL_GROUP;
     }
     else
     {
         recItem.Attributes[OPT_GROUP_ATTRIBUTE] = INDIVIDUAL_GROUP;
     }
     lstBoxTo.Items.Add(recItem);
}

数据

正确，列表框显示数据，但不分组显示数据。如何让选择的 jquery 插件分组显示数据？

谢谢。

更新

我了解到ListBox和DropDownList不支持optgroup。 所以我想尝试这个解决方案，但在理解 javascript 时遇到问题。在代码隐藏中，属性将添加到每个列表项：

foreach (ListItem item in ((DropDownList)sender).Items)
        {
            if (System.Int32.Parse(item.Value) < 5)
                item.Attributes.Add("classification", "LessThanFive");
            else
                item.Attributes.Add("classification", "GreaterThanFive");
        } 

这是JavaScript

<script>
    $(document).ready(function() {
        //Create groups for dropdown list
        $("select.listsmall option[@classification='LessThanFive']").wrapAll("<optgroup label='Less than five'>");
        $("select.listsmall option[@classification='GreaterThanFive']").wrapAll("<optgroup label='Greater than five'>"); 
    });

我不明白"select.listsmall"代表哪里。 我尝试使用我的列表框 ID，但出现异常。谁能解释一下javascript的这一部分？谢谢。

更新这就是我如何使用上面的代码隐藏和 javascript：

private const string OPT_GROUP_ATTRIBUTE = "grouping";
private const string GLOBAL_GROUP = "Global Groups";
private const string PERSONAL_GROUP = "Personal Groups";
private const string INDIVIDUAL_GROUP = "Individuals";
    foreach (DataRow row in m_dtRecipients.Rows)
    {
     ListItem recItem = new ListItem(row["Name"].ToString(), row["ID"].ToString());
     if (row["UserID"].ToString().Equals("Global"))
     {
        recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, GLOBAL_GROUP);                          
     }
     else if (row["UserID"].ToString().Equals(m_strUserID))
     {
        recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, PERSONAL_GROUP);                     
     }
     else
     {
        recItem.Attributes.Add(OPT_GROUP_ATTRIBUTE, INDIVIDUAL_GROUP);
     }
     lstBoxTo.Items.Add(recItem);
    }

这是列表框 HTML：

<asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple" 
  data-placeholder="Choose recipient(s)…" multiple="true" class="chosen-select">
</asp:ListBox>

这是javascript：

  $(document).ready(function () {
             $(".chosen-select").chosen({
                 search_contains: true,
                 no_results_text: "Sorry, no match!",
                 allow_single_deselect: true,
                 group: true
             });
             $('.chosen-container').css('width', '600px');
             //Create groups for dropdown list
             $("select.chosen-select option[@grouping='Global Groups']").wrapAll("<optgroup label='Global Groups'>");
             $("select.chosen-select option[@grouping='Personal Groups']").wrapAll("<optgroup label='Personal Groups'>");
             $("select.chosen-select option[@grouping='Individuals']").wrapAll("<optgroup label='Individuals'>");
         });

我有什么遗漏或错的地方吗？

更新好吧，如果我从属性=值中删除"@"，它不会引发异常，但它也不会对列表进行分组。

Answer 1

我想出了我的问题...Selected-jQuery配置函数必须排在"wrapAll"函数之后。 这是更改：

$(document).ready(function () {       
        //Create groups for dropdown list
        $(".chosen-select option[grouping='GlobalGroups']").wrapAll("<optgroup label='Global Groups'>");
        $(".chosen-select option[grouping='PersonalGroups']").wrapAll("<optgroup label='Personal Groups'>");
        $(".chosen-select option[grouping='Individuals']").wrapAll("<optgroup label='Individuals'>");
        //Configure the ListBox using the 'chosen' jquery plugin
        $(".chosen-select").chosen({
            search_contains: true,
            no_results_text: "Sorry, no match!",
            allow_single_deselect: true
        });
        $('.chosen-container').css('width', '600px');
    });