本文介绍在初始化 select2 时，如何将 json 数据中的自定义字段（如 `s3_key`）直接映射为每个 `
Select2 默认支持通过 data 选项传入对象数组（如 [{id: 1, text: 'Option A', s3_key: '/img/a.png'}]），但它不会自动将额外字段转为 DOM 属性。若需在
不过，正如示例代码所示，一个更优雅且符合实际需求的方案是：*避免在 DOM 上冗余存储 `data-` 属性，转而用 JavaScript 对象缓存原始数据映射关系**。这样既保证性能（无须反复操作 DOM），又确保初始值（如页面加载时已选中项）可立即读取关联元数据。
以下是推荐实现步骤：
✅ 正确做法：构建 ID → 元数据映射表
// 假设后端返回的 JSON 已解析为 JS 数组
const selectData = ;
// 构建快速查找表：{ '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: '',
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 默认隐藏原生
- trigger('load') 无意义：Select2 不识别 'load' 事件，应使用 trigger('change') 主动触发一次变更以响应初始值。
✅ 补充：如确需 data-* 属性（例如供 CSS 或第三方库读取）
可在初始化后，借助 select2:open 或 initSelection（旧版）模拟，但更推荐现代方式 —— 使用 templateResult 自定义渲染，并在
$('#id-gci-main').select2({
data: selectData,
templateResult: function(data) {
if (!data.id) return data.text;
const $el = $('').text(data.text);
$el.attr('data-s3_key', data.s3_key); // 添加到结果项
return $el;
}
});⚠️ 注意：此方式添加的是下拉菜单中
总之，以数据驱动代替 DOM 操作，是处理 Select2 自定义属性最健壮、可维护性最高的实践。
