Retrieving attribute data from selected ListBox items in code behind

Question

I have a web application using asp.net and C#. I have a ListBox where the user can select multiple items. They are grouped using the attribute property. I need this property in the code behind in the button click event. I thought I could set the attribute values on the client side and they would be available on the server side and have learned that is not the case.

I don't know the best way to go about this. Each ListItem has a Name, Value and Group that I would like to have on the server side. The name and value are already available on the server side. I need the group associated with each selected item. Should I create a hidden field for each selected item? Should there be one hidden field with the grouping and value associated with each grouping? I have a jquery function that sets the grouping attribute. I would like to use that to set the hidden field but I am not sure if I should use one hidden field or as many as items selected.

This is the javascript that I have already:

$(document).ready(function () {

//Create groups for recipient 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');

//set attribute property for selected list
$(".chosen-select").chosen().change(function (evt) {
    $(".chosen-select").find("option:selected").each(function () {
        var label = $(this).closest('optgroup').prop('label');

        if (label == "Global Groups") {
            $(this).attr("grouping", "GlobalGroups");
        }
        else if (label == "Personal Groups") {
            $(this).attr("grouping", "PersonalGroups");
        }
        else {
            $(this).attr("grouping", "Individuals");
        }
    });
});

});

This is the HTML:

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

Answer 1

For any with this problem...I went with a hidden field, asp:HiddenField, and adding all of the selections in a semicolon delimited string. I parsed the string in the code behind to determine the recipients that were groups and ones that were individuals. This was my final jquery script:

 $(".chosen-select").chosen().change(function (evt) {
            $("#hdnRecipientAttr").val("");
            $(".chosen-select").find("option:selected").each(function () {
                var label = $(this).closest('optgroup').prop('label');
                var currentHdnValue = $("#hdnRecipientAttr").val();

                if (label == "Individuals") {
                    var attrText = "Individuals-" + $(this).prop('value') + ";";
                    $("#hdnRecipientAttr").val(currentHdnValue + attrText);
                }
                else {
                    var attrText = "Group-" + $(this).prop('value') + ";";
                    $("#hdnRecipientAttr").val(currentHdnValue + attrText);
                }
            });
            //remove ending semicolon
            var hdnValue = $("#hdnRecipientAttr").val();
            $("#hdnRecipientAttr").val(hdnValue.slice(0, -1));
        });