从后面的代码中的选定ListBox项中检索属性数据

时间:2015-03-17 21:11:37

标签: javascript asp.net hidden-field

我有一个使用asp.net和C#的Web应用程序。我有一个ListBox,用户可以在其中选择多个项目。它们使用attribute属性进行分组。我在按钮单击事件后面的代码中需要此属性。我以为我可以在客户端设置属性值,它们将在服务器端可用,并且已经了解情况并非如此。

我不知道解决这个问题的最佳方法。每个ListItem都有一个名称,值和组,我希望在服务器端。名称和值已在服务器端可用。我需要与每个所选项目相关联的组。我应该为每个选定的项目创建隐藏字段吗?是否应该有一个隐藏字段,其中分组和值与每个分组相关联?我有一个jquery函数来设置分组属性。我想用它来设置隐藏字段,但我不确定是否应该使用一个隐藏字段或选择的项目数量。

这是我已经拥有的JavaScript:

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

});

这是HTML:

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

1 个答案:

答案 0 :(得分:0)

对于任何有这个问题的人......我选择了隐藏字段asp:HiddenField,并以分号分隔的字符串添加所有选择。 我在后面的代码中解析了字符串,以确定作为组的接收者和作为个体的接收者。 这是我最后的jquery脚本:

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