通过Ajax设置Bootstrap模态框下拉选中项时标签不显示问题排查

核心问题点 #

1. select赋值逻辑完全错误
   你的下拉框（id="label"）中，所有option的value属性存的是code（PHP循环里写的value="<?php echo $row['code'] ?>"），而option的显示文本是label。但你在Ajax回调里写了$('#label').val(data.label)，相当于把select的value设为data.label——可你的option里根本没有value等于data.label的项，浏览器找不到对应option，就只能选中那个默认的空option。

2. 多余且无效的空option操作
   你给默认空option加了id="code"，还在Ajax里执行$('#code').val(data.code)，这完全是画蛇添足：空option只是占位用的，而且修改它的value只会让它变成一个value为code但文本为空的项，这就是你看到<option value="123" id="code" selected> </option>的原因。

修复方案 #

步骤1：清理无用的空option属性 #

把默认空option的id="code"删掉，简化成：

<option value="" selected></option>

步骤2：修正Ajax回调的select赋值逻辑 #

把错误的$('#label').val(data.label)改成$('#label').val(data.code)，同时删掉$('#code').val(data.code)这行无用代码：

success:function(data)
{
    $('#mymodal').modal('show');
    // 关键修正：用code设置select的value，浏览器会自动匹配对应option并显示文本
    $('#label').val(data.code);
    $('#id').val(id);
    $('#action').val("EDIT");
    $('#operation').val("edition");
}

（可选）处理数据不在现有option列表的情况 #

如果Ajax返回的code可能不在PHP预先生成的option列表里，需要动态创建option并选中：

success:function(data)
{
    $('#mymodal').modal('show');
    var $select = $('#label');
    // 检查是否存在对应code的option
    var $targetOption = $select.find(`option[value="${data.code}"]`);
    if($targetOption.length === 0){
        // 不存在则新建option并添加到下拉框
        $targetOption = $('<option>').val(data.code).text(data.label);
        $select.append($targetOption);
    }
    // 选中目标option
    $select.val(data.code);
    
    $('#id').val(id);
    $('#action').val("EDIT");
    $('#operation').val("edition");
}

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