如何实现动态列数的多列 Select2 下拉选择器-html教程-PHP中文网

如何实现动态列数的多列 Select2 下拉选择器

本文介绍一种灵活方案，通过 data-cols 属性定义列宽分布，结合 Select2 的 templateResult 和 templateSelection 自定义渲染逻辑，实现支持任意列数组合的多列下拉选择器，并修复 data.element 为 undefined 导致的常见错误。

本文介绍一种灵活方案，通过 `data-cols` 属性定义列宽分布，结合 select2 的 `templateresult` 和 `templateselection` 自定义渲染逻辑，实现支持任意列数组合的多列下拉选择器，并修复 `data.element` 为 `undefined` 导致的常见错误。

Select2 默认不支持多列布局，但可通过自定义模板（templateResult / templateSelection）实现结构化展示。关键挑战在于：当选项来自

✅ 正确做法：安全访问 DOM 元素 + 动态列解析

首先，必须校验 data.element 是否存在，再尝试读取其父级

以下是完整、健壮的实现示例：

Jamboss

一款面向大众用户的AI音乐生成应用，通过人工智能帮助用户快速创作歌曲内容。

下载

<!-- HTML -->
<select class="multiSelect2" data-cols="2,6,4"><option value="1">1| employeeName1| HR</option>
<option value="2">2| employeeName2| IT</option>
<option value="3">3| employeeName3| HR</option></select>

$('.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 = $('<div class="row select2-multi-col-row"></div>');

      cols.forEach((width, idx) => {
        const content = parts[idx] !== undefined ? parts[idx] : '';
        row.append(`<div class="col-md-${width}">${escapeHtml(content)}</div>`);
      });

      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 = $('<div class="row select2-multi-col-selection"></div>');
      // 仅显示前两列（如 ID + 姓名）作为选中摘要，提升可读性
      const summaryCols = cols.slice(0, 2).map((w, i) => 
        `<div class="col-md-${w}">${escapeHtml(parts[i] || '')}</div>`
      ).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 的生命周期：它仅在原始
列宽总和建议为 12：Bootstrap 的 col-md-* 基于 12 栅格系统，确保 data-cols="2,6,4" 总和为 12，布局更稳定；若超出或不足，浏览器会自动换行或留白。
分隔符鲁棒性：当前用 | 分割字段，但实际项目中建议统一使用 JSON 字符串（如

样式增强：添加 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 属性驱动，逻辑健壮、易于维护，并兼容各类数据来源场景。