如何在Select2选项中添加并正常显示彩色徽章？

问题出在Select2默认不会解析<option>标签里的HTML内容，只会提取纯文本，所以你直接写的<span class="badge">标签不会被渲染。要实现彩色徽章，需要用Select2的自定义模板渲染功能，步骤如下：

1. 调整HTML输出结构 #

把颜色和状态名称存到<option>的data-*属性里，不要直接在option内写HTML：

<select id="select2B" class="form-select" style="width: 60%;">
    <option label="Choose one"></option>
    <?php foreach ($groupedStatuses as $group_name => $statusesGroup): ?>
        <optgroup label="<?= $group_name; ?>">
            <?php foreach ($statusesGroup as $status): ?>
                <?php
                $selected = ($status['status_id'] == $order->status) ? 'selected' : '';
                ?>
                <option value="<?= $status['status_id']; ?>" <?= $selected; ?> 
                        data-color="<?= $status['status_color']; ?>" 
                        data-name="<?= $status['status_name']; ?>">
                    <?= $status['status_name']; ?>
                </option>
            <?php endforeach; ?>
        </optgroup>
    <?php endforeach; ?>
</select>

2. 配置Select2自定义模板 #

修改JS代码，添加templateResult和templateSelection选项，自定义下拉选项和选中后的渲染逻辑：

$('#select2B').select2({
  placeholder: 'Choose one',
  // 渲染下拉列表中的选项
  templateResult: function(option) {
    // 跳过默认占位选项
    if (!option.id) {
      return option.text;
    }
    // 生成带彩色徽章的HTML元素
    return $(`<span class="badge" style="background-color: ${option.dataset.color}; margin-right: 8px;">${option.dataset.name}</span>`);
  },
  // 渲染选中后顶部显示的内容
  templateSelection: function(option) {
    if (!option.id) {
      return option.text;
    }
    return $(`<span class="badge" style="background-color: ${option.dataset.color};">${option.dataset.name}</span>`);
  }
});

$('#select2B').one('select2:open', function(e) {
  $('input.select2-search__field').prop('placeholder', 'Search...');
});

3. 补充样式调整（可选） #

为了让徽章和Select2的样式更兼容，添加少量CSS：

/* 下拉选项中的徽章样式 */
.select2-results__option .badge {
  padding: 2px 6px;
  font-size: 0.8em;
  vertical-align: middle;
}

/* 选中后顶部的徽章样式 */
.select2-selection__rendered .badge {
  padding: 3px 8px;
  margin: 2px 0;
}

这样修改后，Select2的下拉选项和选中状态都会正确显示带对应颜色的徽章。

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