Select2下拉框无法设置默认值问题求助

核心排查点及修复步骤 #

1. 确认下拉选项已存在对应值 #

Select2无法设置值的最常见原因是：你要设置的current_case.customer值，在下拉框的<option>列表里根本不存在。

• 检查代码是否在调用回显逻辑前，已经加载了所有客户的<option>到#edit-case-form-select-customer中。如果是异步加载客户列表，必须等加载完成后再执行val()设置。
• 验证current_case.customer的格式（比如是ID还是名称）和<option>的value属性完全匹配，大小写、空格都不能错。

2. 修正Select2值设置的语法错误 #

你的代码里用了.select2(change)，这是错误的写法。正确触发Select2更新UI的方式有两种：

// 方式1：先设原生值再触发change事件
$('#edit-case-form-select-customer').val(current_case.customer).trigger('change');

// 方式2：直接调用Select2的val方法
$('#edit-case-form-select-customer').select2('val', current_case.customer);

错误的调用方式会导致Select2无法识别更新指令，自然不会显示默认值。

3. 确保DOM和Select2初始化完成 #

• 确认load_case_info_for_editing_response函数是在Select2初始化完成后才执行的。如果这个函数在$(document).ready()之前运行，下拉框还没被Select2处理，设置值也不会生效。
• 可以加个简单判断，避免未初始化的情况：

const $customerSelect = $('#edit-case-form-select-customer');
if ($customerSelect.data('select2')) {
  $customerSelect.val(current_case.customer).trigger('change');
}

4. 检查数据格式是否匹配 #

打开控制台，打印关键数据验证匹配性：

console.log('要设置的值：', current_case.customer);
console.log('下拉选项值列表：', $('#edit-case-form-select-customer option').map((i, el) => el.value).get());

如果发现current_case.customer是数字类型，但<option>的value是字符串类型（比如123 vs "123"），也会导致匹配失败，需要统一数据类型。

完整修复后的示例代码 #

假设已确保下拉选项加载完成，修改回显逻辑如下：

function load_case_info_for_editing_response() {
    let current_case = JSON.parse(this.responseText)[0];

    document.getElementById('edit-case-title').value = current_case.case_title;
    
    // 修正后的Select2值设置代码
    const $customerSelect = $('#edit-case-form-select-customer');
    $customerSelect.val(current_case.customer).trigger('change');

    document.getElementById("edit-case-form-customer-forename").value = current_case.customer_forename;
    document.getElementById("edit-case-form-customer-surname").value = current_case.customer_surname;
    document.getElementById("edit-case-form-alternate-email").value = current_case.alternate_email;
    document.getElementById("edit-case-form-alternate-phone").value = current_case.alternate_phone;
    document.getElementById("edit-case-form-case-description").value = current_case.case_description;

    console.log(current_case);
}

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