Bootstrap 5下拉框通过Ajax设置选中值后不显示问题求助

问题根源 #

你遇到的核心问题是DOM元素ID重复加上错误的DOM操作逻辑：

1. 你给默认空选项设置了id="code"，但页面中ID必须唯一，这会导致JS操作时只修改这个默认选项，而非选中循环生成的对应选项。
2. 你错误地修改了默认选项的内容和值，而非利用原生select的val()方法直接选中已有选项，导致界面和实际选中状态脱节。

解决方案 #

1. 修正HTML结构（移除重复ID）

删除默认选项的id="code"，保证页面ID唯一性：

<select class="form-select mb-3" id="label" name="label" required>
   <option value="" selected></option>
<?php  while ($row = $stmtGetLabel->fetch()) { ?>
    <option value="<?php echo $row['code'] ?>"><?php echo $row['label'] ?></option>
    <?php }?>
</select>

2. 简化并修正JavaScript代码

去掉修改默认选项的冗余代码，直接通过val()设置选中值，并触发change事件确保界面同步：

$(document).on('click', '.update , #act', function(){
    var id = $(this).attr("id");
    $.ajax({
        url:"inc/functions/ActRef.php",
        method:"POST",
        data:{id:id},
        dataType:"json",
        success:function(data)
        {
            // 先设置下拉框选中值并触发更新
            $('#label').val(data.code).trigger('change');
            // 再显示模态框
            $('#mymodal').modal('show');
            $('#id').val(id);
            $('#action').val("EDIT");
            $('#operation').val("edit");
        }
    })
});

额外注意事项 #

• Bootstrap 5的form-select只是原生select的样式增强，原生val()方法完全可以控制选中状态，触发change事件是为了确保界面及时刷新。
• 无需手动修改option的selected属性，val()方法会自动为对应选项添加该属性，并移除其他选项的selected状态。
• 确保data.code的值和循环生成的option的value完全匹配（包括大小写、空格等），否则无法触发选中。

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