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

我正在使用选择2下拉列表，并希望在选项上设置不同的颜色。我成功地将所有选项更改为一种颜色，但我希望根据该值在多个选项之间进行更改。我有近1000个选项（书中的页面），我需要将其中一些选项（基于某些页面集）标记为绿色。你能提出实现这一目标的方法吗

HTML

例如：

---

使用

选项

标签上的第n个子项

选项：第n个子项（奇数）{
颜色：红色；
}
选项：第n个子项（偶数）{
颜色：绿色；
}
选择1
选择2
选择3
选择4
备选案文5
备选案文6

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

 });

计时器将函数更改颜色放置在事件循环上。

---

感谢所有试图帮助我的人。

如果您能为您开发的最新产品发布一个可重复性最低的示例，那将非常有帮助。我添加了一些代码，但附件中的图片更好地说明了任务。这是否回答了您的问题？先读一遍。不完全是我需要的。寻找更干净的方法。这完全回答了我的答案。非常有用。非常接近，谢谢Dan！不幸的是，它并不完全是奇数/偶数。我有近1000个选项（书中的页面），我需要将其中一些选项（基于某些页面集）标记为绿色。

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

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

 });