如何根据特定选项更改文本颜色？答案

【问题标题】：How to change text color based on specific option?如何根据特定选项更改文本颜色？
【发布时间】：2017-07-05 08:23:33
【问题描述】：

我想把第一个选项的颜色改成#ccc，其他的还是#000，但是不行，为什么？谢谢。我不想使用更改功能，我认为这是不必要的。

类似这样的：

HTML：

  <select id="continent"> 
      <option value="-1">continent</option> 
      <option value="1">US</option> 
      <option value="2">UK</option> 
  </select>

JS：

$("#continent option[value='-1']").css('color','#ccc');

【问题讨论】：

需要更改功能怎么知道没有更改功能选择了选项一？
只是第一个选项的颜色而不是选择的颜色
添加内联样式但颜色只会应用于选项<option value="-1"style="color:#ccc">continent</option>
你试过$("#continent option:first").css('color','#ccc');吗？
How do change the color of the select box's option text?的可能重复

标签： javascript jquery html

【解决方案1】：

$("#continent").change(function(){
    $("#continent").val() == "-1" ? $("#continent").css("color", "red") : $("#continent").css("color", "blue");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="continent"> 
    <option value="-1">continent</option> 
    <option value="1">US</option> 
    <option value="2">UK</option> 
</select>

记得预设默认选项的颜色

【讨论】：

【解决方案2】：

为什么要使用 jQuery？这可以用纯 CSS 来完成。

#continent option {
  background-color: white; /* on XFCE the default background-color is #CCC! */
}

<select id="continent"> 
    <option value="-1" style="color:#cccccc">continent</option> 
    <option value="1">US</option> 
    <option value="2">UK</option> 
</select>

但是您可能不应该这样做，因为看起来该选项已被禁用，但事实并非如此。这是违反直觉且不利于可用性的。

除此之外，它在其他操作系统上看起来也有所不同。这就是上面的 sn-p 在带有 XFCE 的 ubuntu 上的样子：

这就是另一个解决方案的样子，如果选择了第一个选项，它也会将 <select> 的颜色更改为浅灰色：

这就是为什么你应该使用<option value="-1" disabled> 或其他颜色。

【讨论】：

【解决方案3】：

解决办法

$('.mySelect').change(function () {
     if($(this).find("option:selected").attr("value")==2){
    $(this).find('option:selected').css('color', 'red');
    }else{
     $(this).find('option:selected').css('color', 'blue');
    }

});

在上面的代码中，我使用了 .find() 方法，该方法用于选择所选元素try this code in fiddle的子元素@

【讨论】：