本文介绍一套灵活的多列下拉选择器实现方案，通过 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 实现示例，可直接用于实际项目开发：
$('.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 属性驱动，逻辑健壮、易于维护，并且能够兼容多种数据来源场景，无论是静态选项还是远程加载数据都能稳定运行，是一款非常实用的多列下拉选择器解决方案。
