Wie ändere ich die Textfarbe anhand bestimmter Optionen?

Question

Ich möchte die Farbe der ersten Option in #ccc ändern, andere bleiben # 000, aber es funktioniert nicht.Warum? Vielen Dank. Ich möchte keine Änderungsfunktion verwenden, was ich für unnötig halte.

etwas wie folgt aus:

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>

Denken Sie daran, die Farbe der Standardoption

Answer 2

hier Lösung

$('.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'); 
    } 

}); 

In obigem Code voreinzustellen i .find() Methode verwenden, die für ausgewähltes Kind von ausgewähltem Elemente verwendet wird try this code in fiddle

Answer 3

Warum möchten Sie jQuery verwenden? Dies kann mit reinem CSS geschehen.

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

jedoch sollten Sie wahrscheinlich nicht tun, weil es sieht aus wie die Option deaktiviert war, aber es ist nicht. Dies ist nicht intuitiv und gegen die Benutzerfreundlichkeit.

Abgesehen davon sieht es auf anderen Betriebssystemen anders aus. Dies ist, wie das Snippet von oben wie auf ubuntu mit XFCE aussieht:

Und das ist, was eine andere Lösung sieht so aus auch die Farbe der <select> ändert grau leuchten, wenn die erste Option ausgewählt ist:

Deshalb sollten Sie entweder <option value="-1" disabled> oder eine andere Farbe verwendet werden soll.