如何在Selectize插件中正确传入带Bootstrap徽章的选项？

问题原因 #

Selectize默认会自动转义option内的HTML内容，只保留纯文本，导致自定义的span徽章被过滤掉。

解决方案 #

通过配置Selectize的render选项，自定义下拉选项和选中项的渲染逻辑，直接输出包含HTML的内容。

方法一：直接复用原始option的HTML内容 #

适合静态写在select里的选项：

HTML结构

<select id="custom-select">
  <option value="1">选项1 <span class="badge bg-primary">新</span></option>
  <option value="2">选项2 <span class="badge bg-success">热</span></option>
</select>

初始化代码

$('#custom-select').selectize({
  render: {
    // 渲染下拉列表中的选项
    option: function(data) {
      return `<div>${data.text}</div>`;
    },
    // 渲染选中后显示的项
    item: function(data) {
      return `<div>${data.text}</div>`;
    }
  }
});

方法二：用data属性分离文本与徽章信息（更规范） #

避免HTML内容混杂，同时方便维护：

HTML结构

<select id="custom-select">
  <option value="1" data-badge="新" data-badge-class="bg-primary">选项1</option>
  <option value="2" data-badge="热" data-badge-class="bg-success">选项2</option>
</select>

初始化代码

$('#custom-select').selectize({
  // 从原始option中读取数据并映射到Selectize的数据集
  load: function(callback) {
    const options = [];
    $('#custom-select option').each(function() {
      options.push({
        value: $(this).val(),
        text: $(this).text().trim(),
        badge: $(this).data('badge'),
        badgeClass: $(this).data('badge-class')
      });
    });
    callback(options);
    $('#custom-select').empty(); // 清空原始选项避免重复
  },
  render: {
    option: function(data, escape) {
      return `
        <div>
          ${escape(data.text)}
          ${data.badge ? `<span class="badge ${escape(data.badgeClass)}">${escape(data.badge)}</span>` : ''}
        </div>
      `;
    },
    item: function(data, escape) {
      return `
        <div>
          ${escape(data.text)}
          ${data.badge ? `<span class="badge ${escape(data.badgeClass)}">${escape(data.badge)}</span>` : ''}
        </div>
      `;
    }
  }
});

方法三：直接在JS中定义选项（最灵活） #

适合动态生成选项的场景：

初始化代码

$('#custom-select').selectize({
  options: [
    { value: '1', text: '选项1', badge: '新', badgeClass: 'bg-primary' },
    { value: '2', text: '选项2', badge: '热', badgeClass: 'bg-success' }
  ],
  render: {
    option: function(data, escape) {
      return `
        <div>
          ${escape(data.text)}
          <span class="badge ${escape(data.badgeClass)}">${escape(data.badge)}</span>
        </div>
      `;
    },
    item: function(data, escape) {
      return `
        <div>
          ${escape(data.text)}
          <span class="badge ${escape(data.badgeClass)}">${escape(data.badge)}</span>
        </div>
      `;
    }
  }
});

注意事项 #

• 如果内容来自用户输入，必须使用escape()方法转义，防止XSS攻击；静态内容可省略，但建议保留以养成安全习惯。
• render中的函数必须返回HTML字符串，Selectize会直接将其插入DOM。

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