如何实现动态列数的多列 Select2 下拉组件

本文介绍如何基于 Select2 插件构建支持动态列数（如 2 列、3 列等）的多列下拉选择器，通过 data-cols 属性定义每列宽度比例，并安全访问 DOM 元素以避免 data.element 为 undefined 导致的错误。

本文介绍如何基于 select2 插件构建支持动态列数（如 2 列、3 列等）的多列下拉选择器，通过 `data-cols` 属性定义每列宽度比例，并安全访问 dom 元素以避免 `data.element` 为 `undefined` 导致的错误。

Select2 默认不直接支持多列渲染，但可通过自定义 templateResult 和 templateSelection 函数实现灵活布局。关键挑战在于：在 templateResult 中，data.element 在初始化或远程数据场景下可能为 null 或 undefined —— 这正是你遇到 $(data.element).length 为 0 的根本原因。

✅ 正确做法：始终校验 data.element 存在性

$('.multiSelect2').select2({
  templateResult: function(data) {
    // ✅ 关键修复：先判断 data.element 是否存在
    if (!data.element || !$(data.element).is('option')) {
      return data.text; // 回退显示纯文本（如搜索匹配项无 DOM 关联时）
    }

    const $select = $(data.element).closest('select');
    const colsAttr = $select.data('cols'); // 如 "2,6,4"
    if (!colsAttr) return data.text;

    const cols = String(colsAttr).split(',').map(n => parseInt(n, 10)).filter(n => !isNaN(n));
    const parts = String(data.text).split('|').map(s => s.trim());

    const row = $('<p class="row mb-1"></p>');
    cols.forEach((width, idx) => {
      const text = parts[idx] !== undefined ? parts[idx] : '';
      row.append(`<p class="col-md-${Math.max(1, Math.min(12, width))}">${text}</p>`);
    });

    return row;
  },

  templateSelection: function(data) {
    // 同样需校验 data.element（尤其在初始选中/重渲染时）
    if (!data.element || !$(data.element).is('option')) {
      return data.text;
    }

    const $select = $(data.element).closest('select');
    const colsAttr = $select.data('cols');
    if (!colsAttr) return data.text;

    const cols = String(colsAttr).split(',').map(n => parseInt(n, 10)).filter(n => !isNaN(n));
    const parts = String(data.text).split('|').map(s => s.trim());

    const row = $('<p class="row align-items-center" style="font-size:0.875rem;"></p>');
    cols.forEach((width, idx) => {
      const text = parts[idx] !== undefined ? parts[idx] : '';
      row.append(`<p class="col-md-${Math.max(1, Math.min(12, width))}">${text}</p>`);
    });

    return row;
  },

  // ⚠️ 补充建议：启用 dropdownParent 提升样式兼容性（尤其在模态框内）
  dropdownParent: $(document.body)
});

? 注意事项与最佳实践

• data.element 并非总可用：它仅在原始 <option> 元素仍存在于 DOM 且被 Select2 显式关联时有效（例如本地 <select> 初始化）。若使用 AJAX 加载选项或动态创建 OptionData 对象，data.element 将为空，此时应降级处理（如仅用 data.text 解析）。
• 列宽健壮性校验：使用 Math.max(1, Math.min(12, width)) 防止 Bootstrap col-md-* 类非法（如 col-md-0 或 col-md-13）。
• 分隔符兼容性：示例中用 | 分隔字段，实际中建议统一使用不可见字符（如 \u2063）或 JSON 字符串避免业务数据含 | 导致解析错位。
• CSS 补充建议：

  .select2-results__options .row { margin: 0 -4px; }
  .select2-results__options .col-md-* { padding: 0 4px; }
  .select2-selection__rendered .row { margin: 0; }

✅ 最终 HTML 示例

<select class="multiSelect2" data-cols="2,6,4">
  <option value="1">1|Alice Johnson|HR</option>
  <option value="2">2|Bob Chen|Engineering</option>
  <option value="3">3|Carol Kim|Marketing</option>
</select>

通过以上方案，你即可安全、灵活地实现任意列数组合的 Select2 多列渲染，兼顾可维护性与浏览器兼容性。