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

Question

我正在使用 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

Answer 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>

Answer 2

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

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

然后在相关事件上：

 // 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);

 });

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

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

Using different colors for dropdown options using Select2

javascript

jquery

jquery-select2