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

问题描述

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

解决方法

在nth-child标签上使用option

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

解决了！主要问题是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);

 });

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

javascript jquery jquery-select2