如何为 Select2 下拉选项批量添加 data-* 自定义属性

本文介绍在初始化 select2 时，如何将 json 数据中的自定义字段（如 `s3_key`）直接映射为每个 `` 元素的 `data-s3_key` 属性，确保页面加载即生效，无需依赖 `select2:select` 事件。

Select2 默认支持通过 data 选项传入对象数组（如 [{id: 1, text: 'Option A', s3_key: '/img/a.png'}]），但它不会自动将额外字段转为 DOM 属性。若需在 标签上渲染 data-s3_key 等属性，关键在于：不操作 DOM 节点，而是在数据层预置结构，并通过 Select2 的 templateResult 或 data 渲染逻辑间接控制——但更简洁、可靠的方式是：利用 Select2 内部对 data 数组的解析机制，在初始化后立即遍历并手动设置属性。

不过，正如示例代码所示，一个更优雅且符合实际需求的方案是：*避免在 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 默认隐藏原生 ，渲染的是自定义 DOM 结构（.select2-results__option），直接操作 无效；且 data 模式下原生 甚至不会被生成。
• 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;
  }
});