本文详解如何在使用 ajax 动态加载选项的 select2 多选组件中，自动预选数据库中已关联的值（如用户所属机构），通过分离「选项数据源」与「已选状态查询」，结合 javascript 手动注入选项并触发事件实现精准初始化。
本文详解如何在使用 ajax 动态加载选项的 select2 多选组件中，自动预选数据库中已关联的值（如用户所属机构），通过分离「选项数据源」与「已选状态查询」，结合 javascript 手动注入选项并触发事件实现精准初始化。
在基于 CodeIgniter + Select2 的多选场景中，常见需求是：下拉列表从 agencias 表异步加载全部机构（按名称/编码搜索），但需将当前用户（如 id_comercial）在关联表 ejecutivo_agencia 中已绑定的机构自动设为已选状态。Select2 官方明确指出：远程加载（AJAX）模式下，，必须通过 JS 编程式添加并触发事件。
✅ 正确实现步骤
1. HTML 结构保持简洁
<select class="form-control" name="agencia[]" id="listadoAgenciasEdit" data-id="<?php echo $id_comercial; ?>"></select>
✅ 关键点：通过 data-id 属性传递当前用户的 id_comercial，供后续 AJAX 请求使用；无需预先写入
2. 初始化 Select2（仅负责选项加载）
$('#listadoAgenciasEdit').select2({
width: '100%',
placeholder: 'Buscar agencia por Nombre o Código',
language: 'es',
multiple: true,
ajax: {
url: '<?php echo base_url("ajax/ajax_agencias/") ?>',
type: "POST",
dataType: 'json',
delay: 250,
data: function(params) {
return { searchTerm: params.term };
},
processResults: function(response) {
return { results: response };
},
cache: true
},
escapeMarkup: function(markup) { return markup; }
});3. 单独发起请求获取“已选值”，并手动注入
const $select = $('#listadoAgenciasEdit');
const comercialId = $select.data('id');
$.ajax({
type: 'POST',
url: '<?php echo base_url("ajax/ajax_agencias_selected/") ?>',
dataType: 'json',
data: { id_comercial: comercialId },
success: function(data) {
// 清空可能存在的默认占位符（如 placeholder 导致的空值）
$select.empty();
// 逐个创建 Option 并标记为 selected
data.forEach(function(item) {
const $option = new Option(item.text, item.id, true, true);
$select.append($option);
});
// ⚠️ 必须触发 change 事件，使 Select2 同步 UI 状态
$select.trigger('change');
// （可选）触发 select2:select 事件，兼容自定义监听逻辑
data.forEach(function(item) {
$select.trigger({
type: 'select2:select',
params: { data: item }
});
});
}
});4. PHP 后端：分离两个接口
- ajax_agencias()：只查 agencias 表，返回所有可选机构（已提供）
- ajax_agencias_selected()：关键新增接口，根据 id_comercial 查关联表，返回已选机构：
public function ajax_agencias_selected()
{
$id_comercial = $this->input->post('id_comercial');
if (empty($id_comercial)) {
echo json_encode([]);
return;
}
$this->db->select('agencias.CodigoZARO as id, agencias.Nombre_AGENCIA')
->from('ejecutivo_agencia')
->join('agencias', 'ejecutivo_agencia.id_agencia = agencias.CodigoZARO')
->where('ejecutivo_agencia.id_comercial', $id_comercial);
$query = $this->db->get();
$selected = $query->result_array();
$data = array_map(function($row) {
return [
'id' => $row['id'],
'text' => $row['id'] . ' - ' . $row['Nombre_AGENCIA']
];
}, $selected);
echo json_encode($data);
}⚠️ 注意事项与最佳实践
- SQL 安全：示例中 $searchTerm 直接拼接存在 SQL 注入风险，应改用 CI 的 like() 方法或预处理语句；
- ID 字段一致性：确保 ajax_agencias() 和 ajax_agencias_selected() 返回的 id 字段值完全一致（如都用 CodigoZARO），否则无法匹配；
- 空值处理：ajax_agencias_selected() 需校验 id_comercial 是否有效，避免无意义查询；
- 性能优化：若已选机构较多，可考虑在 ajax_agencias() 的 processResults 中增加 selected: true 字段（需后端联合查询），但会增加复杂度；分离接口更清晰、易维护；
- Select2 版本兼容性：上述 new Option(text, value, defaultSelected, selected) 写法适用于 Select2 v4+，v3 使用 val() + trigger('change') 即可。
通过这种「双请求分离」策略，既保持了 Select2 AJAX 模式的搜索灵活性，又精准实现了业务所需的预选逻辑，是企业级后台管理系统的推荐实践方案。
