如何根據特定選項更改文字顏色？

Question

我想將第一個選項的顏色更改爲#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'); 

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

記住預設默認選項

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>或另一種顏色。