如何在Choices.js多选自动完成标签的Option内实现换行？

问题的核心在于：<option>标签内的换行符\n不会被浏览器渲染为换行，而且Choices.js默认会转义选项文本中的HTML标签，直接用<br>也不会生效。要实现名称下方显示描述的效果，我们需要利用Choices.js的自定义模板渲染功能，结合CSS来实现布局。

下面是具体的实现方案：

方案一：推荐使用——自定义渲染模板+结构化数据传递 #

这种方式更安全（防止XSS），也更灵活，适合大多数场景：

1. HTML结构 #

<select id="choices1" class="form-control" name="choices-multiple-remove-button" placeholder="Compétences" multiple></select>

2. JavaScript代码 #

// 示例数据，替换成你的arrayOfObjects
const arrayOfObjects = [
  { id: 1, name: 'JavaScript', description: '用于构建交互性前端页面的脚本语言' },
  { id: 2, name: 'React', description: 'Facebook推出的用于构建用户界面的JavaScript库' },
  { id: 3, name: 'Node.js', description: '基于Chrome V8引擎的JavaScript运行环境' }
];

// 初始化Choices实例，重点配置renderChoiceItem模板
const choices1 = new Choices('#choices1', {
  removeItemButton: true, // 启用移除标签按钮
  placeholderValue: 'Compétences',
  // 自定义选项的渲染逻辑
  renderChoiceItem: function(item, escape) {
    // 用flex布局实现名称和描述垂直排列，escape方法防止XSS攻击
    return `
      <div class="choice-container">
        <span class="choice-name">${escape(item.label)}</span>
        <span class="choice-description">${escape(item.description)}</span>
      </div>
    `;
  }
});

// 将数据转换为Choices需要的格式并添加到组件中
choices1.setChoices(
  arrayOfObjects.map(obj => ({
    value: obj.id,
    label: obj.name,
    description: obj.description // 传递自定义描述字段
  })),
  'value', // 指定value字段
  'label', // 指定label字段
  false // 不自动排序
);

3. CSS样式（实现换行布局） #

.choice-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素，实现换行效果 */
  gap: 3px; /* 名称和描述之间的间距 */
  padding: 4px 8px;
}

.choice-description {
  font-size: 0.85em;
  color: #666; /* 让描述文字更柔和 */
}

方案二：直接在中插入HTML（不推荐，有XSS风险） #

如果你坚持要保留手动插入<option>的方式，可以在选项文本中加入<br>标签，然后修改Choices的渲染逻辑来解析HTML，但这种方式存在XSS安全隐患（如果数据不可信的话）：

// 插入带<br>的<option>
arrayOfObjects.forEach(function(obj){
  var options = `<option value="${obj.id}">${obj.name}<br>${obj.description}</option>`;
  document.getElementById('choices1').insertAdjacentHTML('beforeend', options);
});

// 初始化Choices时关闭文本转义
const choices1 = new Choices('#choices1', {
  removeItemButton: true,
  placeholderValue: 'Compétences',
  renderChoiceItem: function(item) {
    // 注意：这里没有使用escape，直接返回原始label，存在XSS风险
    return `<div>${item.label}</div>`;
  }
});

关键原理说明 #

Choices.js的renderChoiceItem配置项允许我们完全自定义选项的HTML结构，通过这个钩子，我们可以把名称和描述拆分成独立的DOM元素，再用CSS的flex布局实现垂直排列（即视觉上的换行）。同时，使用escape方法可以对用户输入的文本进行转义，避免恶意HTML代码被执行，保证安全性。

内容的提问来源于stack exchange，提问作者Simon Delaunay