分配颜色以选择选项答案

【问题标题】：Assign color to select OPTION分配颜色以选择选项
【发布时间】：2013-12-14 05:46:31
【问题描述】：

如果我想改变一个特定选项标签的颜色，我可以用 jQuery 来做吗？例如，我可以只有 RED 选项以显示为红色吗？

假设我有以下内容

<select class="mySelect">
   <option value="white">White</option>
   <option value="black">Black</option>
   <option value="red">Red</option>
</select>

我不能这样做吗：

$("#mySelect").val('red').addClass('redText');

【问题讨论】：

为什么选择 jQuery？这可以通过 CSS 来完成。

标签： jquery css

【解决方案1】：

试试这个：

$('option[value="red"]').addClass('redText');

$("#mySelect").val('red').addClass('redText'); 将只选择<select> 标记并将其值属性设置为“红色”。 val() 方法是一个 setter/getter。

【讨论】：

实际上，如果选项都相同，那就太好了——黑色，但如果选择了红色，它会显示为红色。我会做类似的事情： $('.mySelect').change(function() { if ( $('.mySelect').val() == 'red' ) { $("#mySelect").val( 'red').addClass('redText'); } });
这个Fiddle 几乎可以满足您的需求（它将整个select 设置为红色，而不仅仅是一个选项）。我会从上面回应@karim79 的评论；在浏览器中仅设置 option 标签的样式非常挑剔。
嗯，有没有办法使用 DOM 将 RED 应用于选定的选项来定位第一个选项？也许这样它不会适用于整个列表？似乎 jQuery 必须有一种方法......也许是这样的： $('#mySelect option:selected').addClass('redText');
类似这样的东西，但我担心我遗漏了一些东西...jsfiddle.net/FXPsu/3 因为 option:selected 指的是列表中的选项，而不是显示 onload 的选定值。
您正在寻找 child selector 以直接设置 option 标记的样式。 $('.mySelect > option:selected').addClass('redText'); 会将类添加到 option 标记中，但不同的浏览器对 option 标记的样式不同。您必须使用它才能使其跨浏览器工作。如果可能，我会使用 select 以外的其他元素。否则，我会寻找一个插件来为您解决跨浏览器问题。

【解决方案2】：

这将在选择中找到第 7 个选项，并用任何有趣的类点亮它。

$('#myselect).find(" option:eq(7)").addClass("interesting_class");

【讨论】：