当我打开更新模式时，所选角色不会出现在我的下拉列表中

Question

下拉列表中的第一个值显示为选中状态。我不希望这样，我希望我选择的行中的值出现在下拉列表中。 任何人都可以检查我的代码并帮助我解决这个问题吗？ 我有一个显示用户数据的表格和一个更新用户信息的模式。当我单击“更新”按钮时，模式将打开，但默认情况下始终选择下拉列表中的第一个值。但是，我希望所选行中的角色值显示在下拉列表中。

这是我的代码：

$('#usersUpdateModal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget); 
   var id = button.data('id'); 
   var role = button.data('role');
   var modal = $(this);
   
   // Populate the input fields with the selected row's data
   modal.find('input[name="users.Id"]').val(id);
   modal.find('select[name="users.Role"]').val(role);  // Here is where the role should be selected
});

@foreach (var k in Model.users)
{
    <tr class="text-nowrap">
        <td>@k.Id</td>
        <td>@k.Role</td>
        <td>
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#kullaniciGuncelleModal" data-id="@k.Id" data-role="@k.Role">
                Güncelle
            </button>
        </td>
    </tr>
}

<div class="row mb-3">
    <div class="col-md-5">
        <label class="col-form-label">Role</label>
    </div>
    <div class="col-md-7">
        <select asp-for="users.YetkiId" class="form-select" required>
            @foreach (var y in Model.yetkiler)
            {
                <option value="@y.Id">@y.Role</option>
            }
        </select>
    </div>
</div>

下拉列表中的角色是从“Yetki”表中提取的，其中包含角色信息。 YetkiId 是外键 (FK)。 可能导致第一个值始终显示为选中状态的原因是什么，如何解决此问题，以便在模式打开时所选行的角色出现在下拉列表中？

Answer 1

这是我的代码，运行良好，您能帮忙检查一下吗？

<table>
    <tr class="text-nowrap">
        <td>user1</td>
        <td>Admin</td>
        <td>
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#RoleModal" data-id="user1" data-role="admin">
                open modal
            </button>
        </td>
    </tr>
    <tr class="text-nowrap">
        <td>user2</td>
        <td>Guest</td>
        <td>
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#RoleModal" data-id="user2" data-role="guest">
                open modal
            </button>
        </td>
    </tr>
</table>

<div class="modal fade" id="RoleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal For Role</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-5">
                        <label class="col-form-label">Role</label>
                    </div>
                    <div class="col-md-7">
                        <select asp-for="Role" class="form-select" required>
                            <option value="admin">admin</option>
                            <option value="guest">guest</option>
                        </select>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@section Scripts {
    <script>
        $('#RoleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var userRole = button.data('role');
            console.info(button);
            console.info(userRole);
            $('#Role').val(userRole);
        });

    </script>
}