如何更改每个 select2 选项的背景？
How to change the background of each select2 option?
我正在使用 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();
向 <select> 中的 <option> 元素添加背景颜色无效，因为这些元素最终被隐藏了。 Select2 隐藏原始 <select>，然后生成自己的元素以生成样式化的“假”select 控件，该控件反映隐藏的“真实”元素的值。
由于 select2 没有提供 API 来将颜色值传递给各个选项，您需要尝试使用 nth-child() select 或者CSS 或一些额外的 javascript 来设置 select2 创建的假选项元素的样式。
我正在使用 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();
向 <select> 中的 <option> 元素添加背景颜色无效，因为这些元素最终被隐藏了。 Select2 隐藏原始 <select>，然后生成自己的元素以生成样式化的“假”select 控件，该控件反映隐藏的“真实”元素的值。
由于 select2 没有提供 API 来将颜色值传递给各个选项，您需要尝试使用 nth-child() select 或者CSS 或一些额外的 javascript 来设置 select2 创建的假选项元素的样式。