下拉列表中的第一个值显示为选中状态。我不希望这样,我希望我选择的行中的值出现在下拉列表中。 任何人都可以检查我的代码并帮助我解决这个问题吗? 我有一个显示用户数据的表格和一个更新用户信息的模式。当我单击“更新”按钮时,模式将打开,但默认情况下始终选择下拉列表中的第一个值。但是,我希望所选行中的角色值显示在下拉列表中。
这是我的代码:
$('#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)。 可能导致第一个值始终显示为选中状态的原因是什么,如何解决此问题,以便在模式打开时所选行的角色出现在下拉列表中?
这是我的代码,运行良好,您能帮忙检查一下吗?
<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>
}