Bootstrap模态框下拉框默认选中问题：如何回显选中行角色

问题原因 #

• 数据不匹配：按钮传递的是角色名称（@k.Role），但下拉框的<option>值绑定的是角色ID（@y.Id），用名称去匹配ID自然无法选中对应选项，导致默认选中第一个。
• 选择器错误：JS代码中用select[name="users.Role"]查找下拉框，但实际HTML里的<select>通过asp-for="users.YetkiId"生成，对应的name属性是users.YetkiId，而非users.Role，导致无法定位到正确的下拉框元素。

修复步骤 #

1. 修正按钮传递的数据 #

将按钮的data-role改为传递用户对应的角色外键ID（YetkiId），而非角色名称：

@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-id="@k.YetkiId">
                Güncelle
            </button>
        </td>
    </tr>
}

2. 修正JS的选择器与赋值逻辑 #

修改JS代码，获取正确的角色ID，并定位到正确的下拉框元素进行赋值：

$('#usersUpdateModal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget); 
   var id = button.data('id'); 
   var roleId = button.data('role-id'); // 获取角色ID
   var modal = $(this);
   
   modal.find('input[name="users.Id"]').val(id);
   // 匹配下拉框的实际name属性，设置对应值
   modal.find('select[name="users.YetkiId"]').val(roleId);
});

提示：可以通过浏览器开发者工具查看下拉框生成的实际name属性值，确保选择器完全匹配。

3. （可选）统一数据类型 #

如果YetkiId是数字类型，可在JS中转换类型避免字符串/数字不匹配：

modal.find('select[name="users.YetkiId"]').val(parseInt(roleId));

内容的提问来源于stack exchange，提问作者fatma başar