select2更新提交后选项丢失、编辑模态框无法回显数据库值如何解决

问题1：编辑模态框中select2无法展示选中值 #

原因 #

仅给原生<select>标签赋值，select2组件不会自动同步原生控件的状态变化，需要主动触发更新。

修复代码 #

在给#regency_id赋值后新增触发select2更新的语句：

$('#regency_id').val(data.data.regency_id); 
// 新增下面这行代码
$('#regency_id').trigger('change');

如果仍未生效，可在模态框完全渲染后重新初始化select2并赋值，同时可以解决下拉框被模态框遮挡的常见问题：

// 放在$.get的回调最后，模态框显示之前
$('#modal-diklat').on('shown.bs.modal', function () {
  $('#regency_id').select2({
    // 保持你原有的select2配置参数
    dropdownParent: $('#modal-diklat')
  }).val(data.data.regency_id).trigger('change');
})
$('#modal-diklat').modal('show');

问题2：提交更新后select2下拉选项丢失 #

原因 #

通常是表单提交后重置、模态框关闭的逻辑里，误清空了原生select的option节点，或者销毁了select2实例未重新初始化导致的。

修复方案 #

1. 不要直接操作#regency_id的option节点做清空，重置选中值统一用下面的代码：

$('#regency_id').val('').trigger('change');

2. 如果模态框关闭后会销毁内部DOM，每次打开模态框时都要重新执行一次select2的初始化逻辑。
3. 如果你在提交成功后调用了原生表单重置方法$('form')[0].reset()，重置后要加一行$('#regency_id').trigger('change')同步select2状态。

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