jquery 与同一类名中的多个 DropDownLists 混淆

Question

我在部分视图中生成了多个 DropDownListFor，如下所示：

循环中：

 @Html.Action("listUnpairedPermissions", item)

部分视图代码：

<div>
    @If CType(Model, IEnumerable(Of UserModel.Permission)).Count > 0 Then
    @Html.DropDownListFor(Function(r) CType(Model, IEnumerable(Of UserModel.Permission)).LastOrDefault.permission_ID, New SelectList(Model, "permission_Id", "permission_description"), "--Select--", New With {.Class = "pID"})
        Html.ValidationMessageFor(Function(m) m.SingleOrDefault.permission_ID)


    Else
    @<p>This Role has all permissions</p>

    End If
</div>

我的 jquery 代码：

    $('.AddPermission2Role').each(function (index) {
        $(this).on("click", function () {
            var tr = $(this).closest('tr');
            var _role_id = tr.find('.roleIdClass').attr('roleIdTD');

            var _permission_id = $('.pID').val();
            var _parameters = { id: _role_id, permissionId: _permission_id };
            $('.pID').change();
            $.ajax({
                url: "/AdminUsers/AddPermission2Role",
                type: "GET",
                data: _parameters,
                success: function (data, textStatus, jqXHR) {
                    $('#roleToPermTable').html(data);
                }


            });
        });
    });

呈现的 HTML：

<div>
<select class="pID" data-val="true" data-val-number="The field permission_ID must be a number." data-val-required="The permission_ID field is required." id="permission_ID" name="permission_ID"><option value="">--Select--</option>
<option value="0">admin-create</option>
<option value="1009">test_Perm</option>
</select></div>
<input type="button" class="AddPermission2Role" value="Add Permission">

... 
<div>
<select class="pID" id="permission_ID" name="permission_ID"><option value="">--Select--</option>
<option value="3">AdminUsers-RoleIndex</option>
<option value="4">AdminUsers-RoleManage</option>
<option value="5">AdminUsers-AddRoleToUser</option>
<option value="6">AdminUsers-DeleteUserRoleReturnPartialView</option>
<option value="7">AdminUsers-PermissionIndex</option>
<option value="8">AdminUsers-addPermission</option>
<option value="41">AdminUsers-UsersRoleIndex</option>
<option value="1008">AdminUsers-addRole</option>
<option value="1009">test_Perm</option>
<option value="1010">AdminUsers-listUnpairedPermissions</option>
<option value="1011">AdminUsers-AddPermission2Role</option>
<option value="1012">Adminusers-DeletePermissionFromRole</option>
</select>
</div>
<input type="button" class="AddPermission2Role" value="Add Permission">

现在，当我从第二个列表中选择一个值时，我的 jquery 不会选择所选值。但是，如果我从第一个列表中选择并点击第二个列表的按钮，它将正确获取值！

我的问题是，如何获得一个独特的下拉列表，每个下拉列表都有自己的提交按钮？ 换句话说，如果它们的按钮具有相同的类名，我的 jquerycode 如何能够区分列表？

Answer 1

所有东西都包含相同的 id，所以这也永远不会起作用。

我通常做的是为我的对象提供一个 NonMapped HtmlId 属性，其中包含连接的 object.typename + object.id，例如'permissionlist1'，'permissionlist2'，然后我在我的部分视图中使用它作为 id，只要我需要一个特定于这个的唯一的。