Question

我想使用选择列表管理用户角色;选择列表下将显示所选的任何角色，并从选择列表中删除该选项。我在我的div上使用自定义数据标记，因此我可以引用每个“显示”，并使用jQuery隐藏/取消隐藏每个“显示”以及添加/删除选择列表中的选项。但是，我的应用程序在测试此功能时崩溃了我的浏览器。崩溃是不一致的;有时，它会在添加或删除一些角色后发生，有时则只会在长时间使用后发生。

jQuery（1.8.3）

//remove role, add option
$(".role_display .close").each(function () {
    $(this).click(function () {
        $("[data-bvalue='" + $(this).data("hvalue") + "']").hide();
        $("#selectedRole_" + $(this).data("hvalue") + "_").val(false);
        $("#User_Roles").append("<option value=" + $(this).data("hvalue") + "></option>");
        $("#User_Roles option[value=" + $(this).data("hvalue") + "]").text($(this).data("tvalue"));
        $("#User_Roles option[value=" + $(this).data("hvalue") + "]").removeAttr("selected");                
    });
});
//add role, remove option
$(".role_add").click(function () {
    $("[data-bvalue='" + $("#User_Roles").val() + "']").show();
    $("#selectedRole_" + $("#User_Roles").val() + "_").val(true);
    $("#User_Roles option[value=" + $("#User_Roles").val() + "]").remove();
    $("#User_Roles option:selected").removeAttr("selected");
});

HTML - 选择列表（如果已分配所有角色，则为空/无选项）

<select class="form-control" id="User_Roles" name="User.Roles">
</select>

HTML - 选择列表（仅包含当前未分配的选项）

<select class="form-control" id="User_Roles" name="User.Roles">
    <option value="1">Admin</option>
    <option value="2">Staff</option>
</select>

HTML - 显示（循环为预定义列表中的每个角色构建其中的每一个;如果已将其分配给用户，则“_selectedRole”选项为true，否则为false）

<div class="btn btn-default col-lg-12 role_display hidden" data-bvalue="@role.RoleId">
    <div class="pull-left">
        @role.Name
        @Html.Hidden("_role[" + role.RoleId + "]", role.RoleId)
        @Html.Hidden("_selectedRole[" + role.RoleId + "]", false)
    </div>
    <div class="close" data-hvalue="@role.RoleId" data-tvalue="@role.Name">&times;/div>
</div>

同样，代码有效，它只是在添加或删除角色时随机崩溃。我的设置方式有什么问题吗？

Answer 1

我不知道你为什么会坠毁，但这里有一些我看到的东西：

（1）当你连接新<option>元素的字符串时，你没有用引号括起“value”属性的值。

（2）似乎没有理由拥有以下行，因为无论如何都没有选择新添加的选项：

$("#User_Roles option[value=" + $(this).data("hvalue") + "]").removeAttr("selected");

（3）添加新选项的更有效和简约的方法是：

$('<option value="' + $(this).data("hvalue") + '"></option>').text($(this).data("tvalue")).appendTo('#User_Roles');

通常，您应该完全构建新元素，然后附加它。

（4）而不是取消选择这样的选项：

$("#User_Roles option:selected").removeAttr("selected");

你应该这样做：

$("#User_Roles option:selected").prop("selected", false);

（5）您在下一行中遗漏了<的结尾</div>：

<div class="close" data-hvalue="@role.RoleId" data-tvalue="@role.Name">&times;/div>

如何正确添加/删除选择选项并隐藏/显示Div？

1 个答案: