如何在Select2组件中为选项的部分内容设置样式？

问题 #

需要为Select2下拉选项的部分内容设置样式。最初在<option>内添加带样式类的<span>标签会被浏览器自动剥离，于是改用HTML实体转义标签内容，让浏览器将其识别为文本。使用jQuery初始化Select2后，需要在组件渲染完成后将转义的HTML实体还原为真实标签，实现“Item X”默认黑色、“X calls”红色的样式效果。尝试使用templateResult方法但未成功，寻求可行解决方案。

初始HTML代码 #

<select id="my_select">
   <option value="1">Item 1 <span class="color-red">20 calls</span></option>
   <option value="2">Item 2 <span class="color-red">10 calls</span></option>
   <option value="3">Item 3 <span class="color-red">30 calls</span></option>
</select>

转义后的HTML代码 #

<select id="my_select">
   <option value="1">Item 1 &lt;span class="color-red"&gt;20 calls&lt;/span&gt;</option>
   <option value="2">Item 2 &lt;span class="color-red"&gt;10 calls&lt;/span&gt;</option>
   <option value="3">Item 3 &lt;span class="color-red"&gt;30 calls&lt;/span&gt;</option>
</select>

初始化Select2的jQuery代码 #

$('#my_select').select2({
    minimumResultsForSearch: -1
});

尝试的无效代码 #

$('#my_select').select2({
    minimumResultsForSearch: -1,
    templateResult: function (item) {
    item.text.replace (/&gt;/g,'>').replace (/&lt;/g,'<');
    }
});

解决方案 #

你之前的templateResult写法存在两个问题：一是没有返回处理后的内容，二是直接操作item.text无法生效。以下是可行的解决方法：

正确的Select2初始化代码 #

$('#my_select').select2({
    minimumResultsForSearch: -1,
    // 渲染下拉列表中的选项
    templateResult: function(item) {
        if (item.loading) {
            return item.text;
        }
        // 创建容器，自动解码HTML实体并转为真实DOM元素
        const $container = $('<span></span>');
        $container.html(item.text);
        return $container;
    },
    // 渲染选中后顶部显示的内容，保持样式一致
    templateSelection: function(item) {
        const $container = $('<span></span>');
        $container.html(item.text);
        return $container;
    }
});

补充CSS样式 #

确保红色样式生效，添加以下CSS代码：

.color-red {
    color: #ff0000;
}

核心原理 #

• templateResult和templateSelection分别负责下拉列表选项、选中后顶部内容的渲染，两者都需要处理HTML实体还原。
• 使用$('<span></span>').html(item.text)可以自动将转义的HTML实体解码为真实标签，让<span class="color-red">能被正确解析并应用样式。

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