заполнить ListBox группами с кодом в списке ListBox с использованием выбранного jquery

Question

Я пишу веб-приложение с использованием веб-форм (ASP.NET/C#). У меня есть элемент управления ListBox, который использует выбранный плагин 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# код для заполнения 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); 
} 

данные правильны и ListBox показывает данные, но не в группах. Как получить выбранный плагин jquery для отображения данных в группах?

Спасибо.

UPDATE

я узнал, что ListBox и DropDownList не поддерживают OPTGROUP. Поэтому я хотел попробовать это решение, но у меня проблемы с пониманием javascript. В коде позади, атрибуты добавляются к каждому 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"); 

     } 

Это 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» представляет собой я. попытался использовать мой идентификатор ListBox, но я получаю исключение. Может кто-нибудь объяснить эту часть javascript? Спасибо.

UPDATE Вот как я использую код-за и 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); 
    } 

Это ListBox 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'>"); 
     }); 

Есть ли что-то, что у меня пропало или что-то не так?

UPDATE Ну, если я удалить «@» из атрибута = значение, оно не бросает исключение, но это также не группа списка.

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