如何使用jQuery设置Bootstrap模态框内select下拉框的选中值？

问题原因 #

你的赋值逻辑不生效核心是值不匹配：

• 你<a>标签的data-group-name属性存储的是权限组的名称（{{ $permission->pgname }}）
• 但下拉框的<option>的value属性存储的是权限组的ID（{{ $permissionsGroup->id }}）
  jQuery的val()方法是根据value属性匹配选中项的，两个值完全对不上，自然无法选中对应选项。

最优解决方案（推荐） #

直接修改<a>标签的data属性，存储权限组ID而非名称，和下拉框的option value对应即可：

1. 修改触发弹窗的<a>标签代码：

<a href="#" class="editpermission" data-bs-toggle="modal" data-bs-target="#editPermission" data-permission-name="{{ $permission->name }}" 
data-group-id="{{ $permission->group_id }}"  <!-- 这里替换成你权限表中实际存储的权限组外键字段名，替换掉原来的data-group-name属性 -->
data-permission-id="{{ $permission->id }}">Edit</a>

2. 修改对应JS代码：

$('.editpermission').click(function() {
    const $el = $(this);
    $('#permission-id').val($el.data('permissionId'));
    $('#permission-name').val($el.data('permissionName'));
    // 直接传入权限组ID匹配option的value
    $('#permission-group').val($el.data('groupId'));
    // 如果使用了select2等下拉增强插件，加下面这行触发视图更新
    // $('#permission-group').trigger('change');
});

替代方案（无需修改HTML属性） #

如果你不想改动现有HTML的data属性，也可以通过匹配下拉选项的文本内容来选中对应项，JS代码修改为：

$('.editpermission').click(function() {
    const $el = $(this);
    const targetGroupName = $el.data('groupName');
    $('#permission-id').val($el.data('permissionId'));
    $('#permission-name').val($el.data('permissionName'));
    // 遍历所有下拉选项匹配文本
    $('#permission-group option').each(function() {
        if ($(this).text().trim() === targetGroupName.trim()) {
            $(this).prop('selected', true);
            break;
        }
    });
});

内容的提问来源于stack exchange，提问作者anna babu