如何更改每个 select2 选项的背景？

Question

我正在使用 select2 作为下拉选择框，我正在尝试更改选项的背景颜色。每个选项都有一个单独的颜色。我尝试通过向选项添加样式属性，但它似乎不起作用。

<select class="js-example-basic-multiple form-control" id="select-tags" name="usertags" multiple="multiple">
        {% for tag in userTags %}
        <option value="{{ tag }}" data-id="{{ tag.color }}" style="background-color:{{ tag.color }}" class="options">{{ tag }}</option>
        {% endfor %}
    </select>

$('.js-example-basic-multiple').select2();

Answer 1

向<select> 中的<option> 元素添加背景颜色不起作用，因为这些元素最终会被隐藏。 Select2 隐藏原来的<select>，然后生成自己的元素以生成样式化的“假”选择控件，该控件反映隐藏的“真实”选择控件的值。

由于 select2 不提供用于将颜色值传递给各个选项的 API，因此您需要尝试使用 CSS 中的 nth-child() 选择器或一些额外的 javascript 来设置 select2 创建的假选项元素的样式。 Here's a question from 2018 with answers demonstrating each approach.