Couleurs des Select/Options

**GérardMartinelli** · 05/03/2014, 12h51

Bonjour,

Avant toute chose je dois avouer que je suis novice en JQuery. Donc excusez ma question si elle semble triviale.

Je suis en train de faire des tests pour changer la couleur de fond d'un "select" après avoir sélectionné une option d'une autre couleur.

Dans le code suivant j'ai la couleur de fond de select initialisé à "Bleu-clair". SI je sélectionne "Rouge" (par exemple) je voudrais que cette couleur devienne le défaut. Je ne sais pas faire ceci.

Toutefois il faut récupérer les informations de l'option que j'ai sélectionnée. Pour ce qui est de la valeur et du texte cela marche bien, mais le rgb est faux. Comment puis-je faire pour récupérer la valeur rgb(255,0,0) lorsque je sélectionne "Rouge".

Merci d'avance.

Gégé

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=Windows-1252"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
</script></head><body>
<center><p><h1>Test JQUERY 
<h2>
<form><select id='S1' style='background-color:#25F0FF;'>
<option value='0' style='background-color:#25F0FF;'  >bleu clair</option> 
<option value='1' style='background-color:#0000FF;'  >bleu</option> 
<option value='2' style='background-color:#FF0000;'   >rouge</option> 
<option value='3' style='background-color:#00FF00;'   >Vert</option> 
<option value='4' style='background-color:#000000;'   >Noir</option> 
</select>
</body></html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $("#S1").mouseup(function(){
         var txt = $("#S1 option:selected").text();
	 var val = $("#S1 option:selected").val();
	 var rgb = $("#S1 option:selected").css('backgroundColor');
	 alert("Texte=" + txt + "  Valeur=" + val + " --> " + rgb);
    });
});

**la.lune** · 06/03/2014, 03h15

Ceci fera l'affaire si j'ai compris ce que tu veux:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(function() {
    $("#S1").change(function (){
        var couleurSelectRGB=$("#S1 :selected").css("backgroundColor");
        $(this).css("background-color",couleurSelectRGB);
    });
});

NB: pour la récupération de la couleur au format rgb c'est avec le "backgroundColor" et pour la propriété css "background-color"

**SpaceFrog** · 06/03/2014, 08h48

Désolé La.lune mais ton code ne fonctionne pas correctement, en tout cas pas de façon cross browser.

Il semble en effet que Jquery ait du mal avec le background-color (ou backgroundColor) des options.
le premier étant la propriété css, le second la propriété de style du DOM en JavaScript.
JQuery accepte les deux syntaxes.

Pour une raison qui m'échappe Jquery n'arrive pas à récupérer directement le css background-color (ou backgroundColor) du :selected sous firefox
apparemment le souci ne se pose pas sous chrome ...

Mais on peut contourner le problème en passant par le un data de l'option

sur le load on récupère le rgb de chaque option que l'on stockez dan un data_rgb
http://jsfiddle.net/Kw8z9/2

Si quelqu'un a une idée de pourquoi il ne sait pas récupérer le css du :selected sur le change ...
http://jsfiddle.net/Kw8z9/5
il choppe bien le data-rgb mais pas la couleur du background ... cf la console...

**la.lune** · 06/03/2014, 14h35

Ah merci pour la précision, mais moi j'ai testé sur chrome et ça marche très bien donc, je me suis pas posé la question si au moins ça marche sur autre navigateur dans le moment où JQuery essayer d'être cross plateforme le plus possible même si ce n'est pas tous les cas.

**SpaceFrog** · 06/03/2014, 14h39

C'est en effet l'une des rares fois que je prends JQuery en defaut sur un comportement crossbrowser, mais au vu de la gestion des options par les différents navigateurs, cela m'étonne à peine.

**Bovino** · 06/03/2014, 15h09

Il me semble que les balises <option> ne peuvent pas avoir de styles dans certains navigateurs...

Couleurs des Select/Options

jQuery

Vue hybride

Discussions similaires

Partager

Partager