本文介绍如何基于 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 = $('<div class="row mb-1"></div>');
cols.forEach((width, idx) => {
const text = parts[idx] !== undefined ? parts[idx] : '';
row.append(`<div class="col-md-${Math.max(1, Math.min(12, width))}">${text}</div>`);
});
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 = $('<div class="row align-items-center" style="font-size:0.875rem;"></div>');
cols.forEach((width, idx) => {
const text = parts[idx] !== undefined ? parts[idx] : '';
row.append(`<div class="col-md-${Math.max(1, Math.min(12, width))}">${text}</div>`);
});
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 多列渲染，兼顾可维护性与浏览器兼容性。
