如何为每个 select2 选项使用不同的颜色？

【问题标题】：How to use different colors for each select2 option?如何为每个 select2 选项使用不同的颜色？
【发布时间】：2018-09-22 21:43:34
【问题描述】：

我正在使用 select2 下拉菜单，并希望为每个选项设置不同的颜色。

示例：

<select class="select2" name="fruit">
  <option class="red-option">Apple</option>
  <option class="green-option">Kiwi</option>
  <option class="blue-option">Grape</option>
</select>

我可以对渲染后的选定选项进行着色，如下所示：

.select2-selection__rendered[title="Apple"] {
  color: red !important;
}

如何对 select2 下拉菜单中的选项进行着色 - 基于选项类（'red-option'）或值（'Apple'）？

PS：我使用 bootstrap 3.3 + jQuery，如果必须的话，不介意使用 JS 来执行此操作。

【问题讨论】：

标签： html css twitter-bootstrap-3 jquery-select2

【解决方案1】：

我使用选项找到了更好的解决方案

function formatState(state) {
  const option = $(state.element);
  const color = option.data("color");

  if (!color) {
    return state.text;
  }

  return $(`<span style="color: ${color}">${state.text}</span>`);
};

jQuery(node).select2({
  templateResult: formatState,
  templateSelection: formatState,
});

在我的例子中，颜色来自 html 数据属性

<option style="color: #F00" data-color="#F00" value="1">Red Option</option>

【讨论】：

谢谢。这对于 class="red" 不起作用的单个选项的样式非常有效。
我有一个小要求。我尝试使用相同的代码，它工作正常，唯一的问题是它只是为文本着色，我需要该特定项目的整个背景来更改其颜色。 background-color 样式属性仅适用于该文本背景。我尝试使用 status.text.select2.parent.addClass() 来获取
项目以更改其背景颜色，但它不起作用。谁能帮忙。

我使用了 option.addClass("someclass") ，它确实有效，但它仍然没有完全为

元素着色，而且当我选择颜色选项时，它也没有在选择中显示控件被选中，而是显示为空白。 option.parent().addClass() 也不起作用。造型不是我的强项，时隔5年编程，请帮帮我。

【解决方案2】：

知道了。

Select2 使用父 select 的 name 属性为所有下拉选项生成一个 id 属性。

在我的示例中，我可以使用 :nth-child(x) 应用颜色，如下所示：

.select2-results__options[id*="select2-fruits"] .select2-results__option:nth-child(1) {
  color: red;
}
.select2-results__options[id*="select2-fruits"] .select2-results__option:nth-child(2) {
  color: green;
}
.select2-results__options[id*="select2-fruits"] .select2-results__option:nth-child(3) {
  color: blue;
}

<select class="select2" name="fruit">
    <option class="red-option">Apple</option>
    <option class="green-option">Kiwi</option> 
    <option class="blue-option">Grape</option> 
</select>

【讨论】：

抱歉，但我不认为这个答案是正确的：如果你使用 nth-child，那么对选项有不同的类有什么意义？？？这样，如果选项没有排序，您仍然无法实现您的目标

【解决方案3】：

您可以在 select2-results__option 元素上使用 CSS 属性选择器：

$(".select2").select2();

.select2-selection__rendered[title="Apple"] {
  color: red !important;
}

.select2-results__option[id*="Apple"] {
  color: red;
}

select {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="select2" name="fruit">
  <option class="red-option">Apple</option>
  <option class="green-option">Kiwi</option>
  <option class="blue-option">Grape</option>
</select>

【讨论】：

这似乎不起作用。赋予结果选项的id 属性使用select 的name 属性，而不是options 属性。在我的示例中，select2 应用于 .select2-results__option 的 id 类似于 select2-fruits-a0-result-rh69-1