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

Posted 2023-05-07

【中文标题】使用 Select2 为下拉选项使用不同的颜色

【英文标题】：Using different colors for dropdown options using 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

之前读过。不完全是我需要的。寻找更清洁的方式。

这完全回答了我的答案。 ***.com/questions/36360783/… 最有用。

【参考方案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);

 );

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