如何用JavaScript/jQuery将数据库查询值回显到select2下拉框中？

问题原因 #

select2是基于原生select封装的前端组件，直接修改原生DOM的value属性不会触发select2的视图更新，必须调用select2提供的官方API完成赋值操作。

解决方案 #

前提确认 #

首先确认你页面上的eddriverselect、edtruckselect两个select元素已经提前完成select2初始化，且下拉选项已经加载完毕（如果是静态选项则页面初始化完成就可用，如果是select2远程拉取选项，要确保选项加载完成后再执行回显逻辑）。

修改赋值逻辑 #

把你原有代码中给两个select赋值的两行：

document.getElementById('eddriverselect').value = data.response.driver.username;
document.getElementById('edtruckselect').value = data.response.truck.name;

替换为select2专用的赋值语法：

// 静态选项场景使用
$('#eddriverselect').val(data.response.driver.username).trigger('change');
$('#edtruckselect').val(data.response.truck.name).trigger('change');

如果你的select2是远程加载选项（页面初始没有渲染对应option），则使用以下逻辑：

// 远程选项场景使用
// 回显司机
let driverOpt = new Option(data.response.driver.username, data.response.driver.username, true, true);
$('#eddriverselect').append(driverOpt).trigger('change');

// 回显卡车
let truckOpt = new Option(data.response.truck.name, data.response.truck.name, true, true);
$('#edtruckselect').append(truckOpt).trigger('change');

修改后完整代码 #

function getTrip(tripid){    
    document.getElementById('edtrip').value = tripid;    
    var url = "api/gettripinfo";    
    $.post(url,{
        tripid : tripid,
    },function(data, status){
        if (data.status == "OK") {
            if (data.statusCode == 1) {
                document.getElementById("edcompanyselect").value = data.response.company.companyname;
                document.getElementById("ed_com").value = data.response.company.companyid;
                // 替换为select2赋值逻辑
                $('#eddriverselect').val(data.response.driver.username).trigger('change');
                $('#edtruckselect').val(data.response.truck.name).trigger('change');
                document.getElementById("edtripnumber").value = data.response.tripnumber;
                document.getElementById("eddate").value = data.response.date;            
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        } else {
            var error = data.responseMessage;
            swal(error, "", "error");
        }
    });
}

注意事项 #

如果回显仍不生效，检查option的value属性是否和你传入val()的值匹配，select2的val()方法匹配的是option的value值，不是显示的文本内容，如果你的option的value存的是司机ID、卡车ID，要对应传入ID值而非名称。

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