colorer l'option d'une balise select

Version imprimable

Voir 40 message(s) de cette discussion en une page

13/09/2008, 10h54
nebil

colorer l'option d'une balise select [merci Bovino]

Bonjour,
je cherche a coloré le fond de l'option choisi de la balise select ,
pour etre le plus claire possible

j'ai un fond bleu pour l'emsemble de ma balise select mais si je choisi
l'option 5 celle ci est juste celle ci son fond devient vert .

j'ai pensé que c'ete javascript qui pouvais faire cela !!

Code:

1
2
3
4
5
6
<select style='background-color:blue'>
<option value='0'>1er</option>
<option value='1' style='background-color:green'>2e</option>
<option value='2'>3e</option>
<option value='3'>4e</option>
</select>

via javascript, changer le background

13/09/2008, 13h35
SpaceFrog

ben bigboom... c'est pas la 5 :aie:
13/09/2008, 15h38
nebil

merci pour ta reponse bigboomshakala mais
c'est pas exactement ca que je cherche , dans la solution que tu me propose
quand le select est deroulé la background du choix 2 est deja vert

moi ce que je cherche c'est

je deroule le select tout les background sont bleu
mais une fois le choix fait celui en question devient vert alors que les autres reste bleu .
13/09/2008, 17h28
bigboomshakala

Citation:

Envoyé par SpaceFrog

ben bigboom... c'est pas la 5 :aie:

:aie: gna ^^

nebil> je ne t'ai pas donné la réponse, j'avais 30 secondes pour poster je t'ai juste montrer via html les propriétés sur lesquelles il faut jouer (mais toi via javascript...)
13/09/2008, 21h49
nebil

c'est justement de cette aide la que j'ai besoin !!, ajouter un proprieté a un balise pour cela ca va je sais faire , c'est en JS que je n'y connais rien .
13/09/2008, 23h29
bigboomshakala

Citation:

Envoyé par nebil

c'est justement de cette aide la que j'ai besoin !!, ajouter un proprieté a un balise pour cela ca va je sais faire , c'est en JS que je n'y connais rien .

c'est pour ça su'il y a la FAQ et les tuto en 1er lieu...
http://javascript.developpez.com/faq...ent#rollOverTr
14/09/2008, 19h42
nebil

meme avec le tuto je trouve pas la solution

Code:

<select style='background-color:blue' onchange="changeCouleur(this)">

et :
Code:

1 2 3 4 5 6 changeCouleur(elt){ for(var i=0;i<elt.options.length;i++){ elt.options[i].style.backgroundColor=''; } elt.options[elt.selectedIndex].style.backgroundColor='green'; }

slt Bovino ,

j'ai mis ton code entre <head> </head>, mais sa marche pas:cry:

Code:

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
changeCouleur(elt){
for(var i=0;i<elt.options.length;i++){
elt.options[i].style.backgroundColor='';
}
elt.options[elt.selectedIndex].style.backgroundColor='green';
}
</script>

Code:

1
2
3
4
5
6
7
8
9
 
 
<select name="accident" id="accident"  style="width:147px;"
 onchange="changeCouleur(this)" >
<option value="0" >Toute</option>
<option value="1" selected="selected">Non Accident&eacute;</option>
<option value="2"   onchange="this.style.background='#7C9BE1'" >
Uniquement Accident&eacute;</option>
  </select>

15/09/2008, 08h48
SpaceFrog

onchange uniquement dans la balise select !!! pas dasn les options !!!!!

Code:

<option value="2" onchange="this.style.background='#7C9BE1'" >

Attention, le onchange sur un option ne fonctionne que sous FF il me semble... et background n'est pas un style... Sinon, essaye comme ça :
Code:

1 2 <select name="accident" id="accident" style="width:147px;" onchange="changeCouleur()" >
et
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> function changeCouleur(){ var elt = document.getElementById('accident'); for(var i=0;i<elt.options.length;i++){ elt.options[i].style.backgroundColor='blue'; } elt.options[elt.selectedIndex].style.backgroundColor='green'; } </script>
EDIT :
La grosse boulette, j'avais oublié de déclarer function !!! :oops:

15/09/2008, 08h58
nebil

merci Bovino
non sa marche pas au mieux sa colore le backgroung de l'ensemble du select
mais pas uniquement celui de l'option choisi,
apparement c'est pas si evident que ca

Alors, peut-être :

Code:

1
2
3
4
5
6
function changeCouleur(){
var elt = document.getElementById('accident');
for(var i=0;i<elt.options.length;i++){
elt.options[i].style.backgroundColor=elt.options[i].selected?'green':'blue';
}
}

15/09/2008, 09h10
nebil

non plus :?http://nebilpro.free.fr/perso/menu.html
15/09/2008, 09h12
Bovino
En fait, le onchange pose problème (le change est effectif après la perte de focus), essaye avec onclick :
Code:

1 2 <select name="accident" id="accident" style="width:147px;" onclick="changeCouleur()" >
15/09/2008, 09h18
nebil

non plus , mais apparement SpaceFrog dit que le onchange ne fonctionne que sur le select et pas sur le Onchange !!!
15/09/2008, 09h38
Bovino
Code:

<select onclick="changeCouleur()" style="width: 72px; background-color: rgb(255, 204, 0);" name="kilometrage_debut">

:zekill:
Ca n'a rien à voir avec
Code:

1 2 <select name="accident" id="accident" style="width:147px;" onchange="changeCouleur(this)" >
Donc c'est sur que sans l'id, le getElementById va poser problème !!!
15/09/2008, 10h04
nebil

:? http://nebilpro.free.fr/perso/menu.html
15/09/2008, 10h10
Bovino

Code:

<select id="accident" name="kilometrage_debut" style="width: 72px; background-color: rgb(255, 204, 0);" onclick="changeCouleur()">

si

Code:

var elt = document.getElementById('accident');

Voir 40 message(s) de cette discussion en une page