本文介绍在初始化 select2 时，如何将 json 数据中的自定义字段（如 `s3_key`）直接映射为每个 `
Select2 默认支持通过 data 选项传入对象数组（如 [{id: 1, text: 'Option A', s3_key: '/img/a.png'}]），但它不会自动将额外字段转为 DOM 属性。若需在 <option> 标签上渲染 data-s3_key 等属性，关键在于：不操作 DOM 节点，而是在数据层预置结构，并通过 Select2 的 templateResult 或 data 渲染逻辑间接控制——但更简洁、可靠的方式是：利用 Select2 内部对 data 数组的解析机制，在初始化后立即遍历并手动设置属性。
不过，正如示例代码所示，一个更优雅且符合实际需求的方案是：*避免在 DOM 上冗余存储 `data-` 属性，转而用 JavaScript 对象缓存原始数据映射关系**。这样既保证性能（无须反复操作 DOM），又确保初始值（如页面加载时已选中项）可立即读取关联元数据。
以下是推荐实现步骤：
✅ 正确做法：构建 ID → 元数据映射表
// 假设后端返回的 JSON 已解析为 JS 数组
const selectData = <?= $aJsonGCIsPrincipalesOtorgados ?>;
// 构建快速查找表：{ '1': { text: 'xxx', s3_key: '/xx/image.png' }, ... }
const metadataMap = selectData.reduce((map, item) => {
map[item.id] = {
text: item.text,
s3_key: item.s3_key
};
return map;
}, {});
// 初始化 Select2
$('#id-gci-main').select2({
language: '<?= getLanguage() ?>',
closeOnSelect: true,
allowClear: true,
placeholder: '',
data: selectData
});
// 监听 change 事件（兼容初始化值）
$('#id-gci-main').on('change', function() {
const selectedId = this.value;
if (selectedId && metadataMap[selectedId]) {
const s3Key = metadataMap[selectedId].s3_key;
console.log('当前选中图像 S3 Key:', s3Key);
// ? 此处可立即加载图片、更新预览等
// $('#preview-img').attr('src', s3Key);
}
});⚠️ 注意事项
- *不要在 select2:select 中动态加 `data-属性**：该事件仅在用户主动选择时触发，无法覆盖页面初始已选中的状态（如value="1"` 已存在 DOM 中），导致首屏图像无法自动显示。
- 避免操作 .children() 或 .find('option')：Select2 默认隐藏原生 <select>，渲染的是自定义 DOM 结构（.select2-results__option），直接操作 <option> 无效；且 data 模式下原生 <option> 甚至不会被生成。
- trigger('load') 无意义：Select2 不识别 'load' 事件，应使用 trigger('change') 主动触发一次变更以响应初始值。
✅ 补充：如确需 data-* 属性（例如供 CSS 或第三方库读取）
可在初始化后，借助 select2:open 或 initSelection（旧版）模拟，但更推荐现代方式 —— 使用 templateResult 自定义渲染，并在 <li> 元素上添加属性：
$('#id-gci-main').select2({
data: selectData,
templateResult: function(data) {
if (!data.id) return data.text;
const $el = $('<span></span>').text(data.text);
$el.attr('data-s3_key', data.s3_key); // 添加到结果项
return $el;
}
});⚠️ 注意：此方式添加的是下拉菜单中 <li> 的属性，不是 <option>（原生 select 不存在），且 data-s3_key 不会出现在最终选中项的输入框 DOM 中 —— 若需全局可查，仍建议优先采用 metadataMap 方案。
总之，以数据驱动代替 DOM 操作，是处理 Select2 自定义属性最健壮、可维护性最高的实践。
