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

Question

我想将第一个选项的颜色更改为#ccc，其他选项仍为＃000，但它不起作用。为什么？谢谢。  我不想使用更改功能，我认为这是不必要的。

这样的事情：

HTML：

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

JS：

HASH(salt + input)

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请记住预设默认选项的颜色

Answer 2

这是解决方案

$('.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的选择子项

Answer 3

为什么要使用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>

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

除此之外，它在其他操作系统上看起来也不同。这就是上面的代码片段在ubuntu上使用XFCE的样子：

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

这就是你应该使用<option value="-1" disabled>或其他颜色的原因。