使用 Select2 为下拉选项使用不同的颜色答案

【问题标题】：Using different colors for dropdown options using Select2使用 Select2 为下拉选项使用不同的颜色
【发布时间】：2020-12-07 17:47:03
【问题描述】：

我正在使用 Select2 下拉菜单，并希望在选项上设置不同的颜色。我成功地将所有选项更改为一种颜色，但我想根据值在几个选项之间变化。我有近 1000 个选项（书中的页面），我需要将其中一些（基于某些页面集）标记为绿色。您能提出实现这一目标的方法吗？

HTML

<label for="add-coord-page">P:  </label>
<select class="select2" id="add-coord-page" name="pages" style="width:60px"></select>

CSS

#select2-add-coord-page-results { 
    color: red;
}

示例： Expected result

【问题讨论】：

如果您发布一个可重复性极低的示例来说明您目前所开发的内容，将会很有帮助
谢谢。我添加了一些代码，但附图可以更好地说明该任务。
这能回答你的问题吗？ Change select box option background color
之前读过。不完全是我需要的。寻找更清洁的方式。
这完全回答了我的答案。 stackoverflow.com/questions/36360783/… 最有用。

标签： javascript jquery jquery-select2

【解决方案1】：

在option 标签上使用nth-child

<style>
    option:nth-child(odd) {
        color: red;
    }
    option:nth-child(even) {
        color: green;
    }
</style>
<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
</select>

【讨论】：

非常接近，谢谢丹！不幸的是，它并不完全是 - 奇数/偶数。我有近 1000 个选项（书中的页面），我需要将其中一些（基于某些页面）标记为绿色。

【解决方案2】：

解决了！主要问题是 selection2 下拉选项是动态创建的，并且没有在其上生成任何事件。这就是诀窍。

我标记了所有应该通过添加空间来改变颜色的页面。

然后在相关事件上：

 // Set colors of pages containing images
 $('#add-coord-page').on('select2:open', function (e) {

     setTimeout(function () {
         $('.select2-results__option:contains(" ")').css('color', SUCCESS_COLOR);
     }, 100);

 });

计时器将函数更改颜色放在事件循环中。感谢所有尝试帮助我的人。

【讨论】：