populate ListBox with groups in code-behind to ListBox using jquery chosen

Question

I am writing a web application using web forms (ASP.NET / C#). I have a ListBox Control that is using the jquery plugin, chosen. I populate the list box in the code-behind using a database call. It is working fine so I wanted to add groups to the ListBox. The data is displayed in a list, not by the groups I set.
I beleive the problem is with the chosen query plugin. I need to maybe set the option of this plugin somehow but I have not seen any documentation on how to do it. This is my javascript / HTML code:

<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>

This is my C# code to populate the ListBox:

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);
}

The data is correct and the ListBox shows the data but not in groups. How do I get the chosen jquery plugin to show the data in groups?

Thanks.

UPDATE

I have learned that the ListBox and DropDownList do not support optgroup. So I wanted to try this solution but am having trouble understanding the javascript. In the code behind, attributes are added to each ListItem:

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");

        } 

This is the 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'>"); 
    });

I don't understand where the "select.listsmall' represents. I tried using my ListBox ID but I get an exception. Can anyone explain this part of the javascript? Thanks.

UPDATE THis is how I am using the code-behind and javascript from above:

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);
    }

This is the ListBox HTML:

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

This is the 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'>");
         });

Is there something that I am missing or wrong?

UPDATE Well, if I remove the '@' from the attribute=value, it does not throw an exception but it also does not group the list.

Answer 1

I figured out my problem...the chosen-jquery configuration function has to come after the 'wrapAll' functions. This is the change:

$(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');
    });