动态列数多列Select2下拉选择器实现技巧

本文介绍一套灵活的多列下拉选择器实现方案，通过 data-cols 属性灵活定义每列宽度分布，充分利用 Select2 的 templateResult 与 templateSelection 自定义渲染钩子，打造支持任意列数组合的动态列数 Select2 下拉选择器，同时修复因 data.element 为 undefined 而引发的常见报错问题。

本文将深入探讨一个非常实用的开发需求：如何让 Select2 下拉选择器以多列形式展示数据，并且列的数量与宽度能够灵活调整。实现思路并不复杂——通过自定义 data-cols 属性来定义每列的宽度比例，再借助 Select2 提供的 templateResult 和 templateSelection 两个渲染钩子，编写自定义展示逻辑，即可轻松实现任意列数组合的多列布局。除此之外，本文还会一并解决一个开发者经常遇到的棘手问题：data.element 为 undefined 所导致的脚本报错。

Select2 本身并不原生支持多列布局，但借助其强大的自定义模板机制（templateResult / templateSelection），我们完全可以实现结构清晰、信息丰富的多列展示效果。这里的关键难点在于：当选项来源于页面中的 标签，并且 Select2 已完成初始化之后，data.element 在某些特定场景下——例如搜索结果项渲染、AJAX 远程数据加载，或者是初始化过程的某个阶段——可能会变成 null 或 undefined。这正是导致 $(data.element).length 报错的根本原因，几乎可以确定问题出在这里。

✅ 正确实现方案：安全访问 DOM 元素 + 动态列宽解析

首先，务必对 data.element 进行存在性校验，确认无误后再尝试读取其父级 上的 data-cols 属性。如果 data.element 不可用（例如遇到远程数据源或虚拟选项时），则需要准备一套降级处理策略——比如从 data.id 或 data.text 中解析字段信息，或者直接使用预设的列配置参数。

以下是一个完整且健壮的多列 Select2 实现示例，可直接用于实际项目开发：

1| employeeName1| HR 2| employeeName2| IT 3| employeeName3| HR

$('.multiSelect2').select2({  // 启用自定义模板  templateResult: function(data) {    // ? 安全检查：data.element 可能为 undefined（如分页/远程加载时）    if (!data.element || !data.text) return data.text; // 降级显示纯文本    try {      const $select = $(data.element).closest('select');      const dataCols = $select.data('cols');      if (!dataCols) return data.text;      const cols = String(dataCols).split(',').map(n => parseInt(n, 10)).filter(n => !isNaN(n));      if (cols.length === 0) return data.text;      const parts = data.text.split('|').map(p => p.trim());      const row = $('
');      cols.forEach((width, idx) => {        const content = parts[idx] !== undefined ? parts[idx] : '';        row.append(`
${escapeHtml(content)}
`);      });      return row;    } catch (e) {      console.warn('Failed to render multi-column option:', e);      return data.text; // 降级兜底    }  },  templateSelection: function(data) {    // selection 模板同理，也需校验    if (!data.element || !data.text) return data.text;    try {      const $select = $(data.element).closest('select');      const dataCols = $select.data('cols');      if (!dataCols) return data.text;      const cols = String(dataCols).split(',').map(n => parseInt(n, 10)).filter(n => !isNaN(n));      const parts = data.text.split('|').map(p => p.trim());      const row = $('
');      // 仅显示前两列（如 ID + 姓名）作为选中摘要，提升可读性      const summaryCols = cols.slice(0, 2).map((w, i) =>         `
${escapeHtml(parts[i] || '')}
`      ).join('');      row.html(summaryCols);      return row;    } catch (e) {      return data.text;    }  },  // 可选：启用搜索高亮（需配合 highlight.js 或手动处理）  escapeMarkup: function(markup) { return markup; }});

? 辅助函数：防止 XSS 跨站脚本攻击的 HTML 转义工具

function escapeHtml(text) {const div = document.createElement('div');div.textContent = text;return div.innerHTML;}

⚠️ 注意事项与最佳实践建议

• data.element 的生命周期管理：该属性仅在原始 标签存在且未被 Select2 内部“虚拟化”处理时有效。对于 AJAX 远程加载的数据、动态插入的选项，或者执行了 select2('destroy') 后重新初始化的场景，这个属性经常为空。因此，永远不要假设 data.element 一定存在，这是必须遵守的编码铁律。
• 列宽总和建议设置为 12：Bootstrap 的栅格系统基于 12 列设计，因此将 data-cols 配置为"2,6,4"这类总和为 12 的值，可以确保布局稳定美观。如果总和大于或小于 12，浏览器会自动换行或产生空白间隙，影响展示效果。
• 分隔符解析的鲁棒性提升：当前示例使用 | 作为字段分隔符，虽然可以满足基本需求，但在实际项目中更推荐采用 JSON 字符串格式（例如 ），配合 data-* 属性来存储结构化数据，这样可以有效避免解析过程中的歧义与兼容性问题。
• 样式增强与对齐优化：别忘了添加必要的 CSS 样式，确保多列内容对齐一致，整体视觉效果更加专业：

  .select2-multi-col-row > div,.select2-multi-col-selection > div {  padding: 4px 8px;  line-height: 1.4;}.select2-results__option .select2-multi-col-row {  width: 100%;}

通过这套完整的动态列数 Select2 多列选择器方案，列数与宽度完全由 HTML 属性驱动，逻辑健壮、易于维护，并且能够兼容多种数据来源场景，无论是静态选项还是远程加载数据都能稳定运行，是一款非常实用的多列下拉选择器解决方案。