实现动态列数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 = $('
');
    cols.forEach((width, idx) => {
      const text = parts[idx] !== undefined ? parts[idx] : '';
      row.append(`
${text}
`);
    });
    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 = $('
');
    cols.forEach((width, idx) => {
      const text = parts[idx] !== undefined ? parts[idx] : '';
      row.append(`
${text}
`);
    });
    return row;
  },
  // ⚠️ 补充建议：启用 dropdownParent 提升样式兼容性（尤其在模态框内）
  dropdownParent: $(document.body)
});

代码的核心要点在于：在访问 data.element 之前，务必先检查它是否存在。如果不存在，则降级处理，直接返回纯文本。这样做的内在逻辑是：当数据来自 AJAX 加载或动态创建的 OptionData 对象时，data.element 为空，此时只能依靠 data.text 来解析字段。

? 注意事项与最佳实践

• data.element 并非总是可靠：它只在原始 元素仍然存在于 DOM 中，并且被 Select2 显式关联时才有效（例如本地 初始化）。如果使用 AJAX 加载选项，或者动态创建 OptionData 对象，data.element 就会为空。此时必须降级处理，比如仅使用 data.text 解析。
  列宽校验要严格把关：通过 Math.max(1, Math.min(12, width)) 可以避免生成 Bootstrap 的非法类名，比如 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 示例

  1|Alice Johnson|HR 2|Bob Chen|Engineering 3|Carol Kim|Marketing

  采用上述方案后，你就能安全、灵活地实现任意列数组合的 Select2 多列渲染效果。配合 Bootstrap 的网格系统，视觉表现立竿见影，而且可维护性与浏览器兼容性都有保障。归根结底，这个问题的核心就是把握好 data.element 的存在性检查，以及列宽校验的健壮性。