如何更改每個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 創建的假選項元素的樣式。 這是 2018 年的一個問題，其中的答案展示了每種方法。