colorer l'option d'une balise select

**nebil** · 13/09/2008, 10h54

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

**bigboomshakala** · 13/09/2008, 12h32

Code :

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

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

**SpaceFrog** · 13/09/2008, 13h35

ben bigboom... c'est pas la 5

**nebil** · 13/09/2008, 15h38

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 .

**bigboomshakala** · 13/09/2008, 17h28

Envoyé par SpaceFrog

ben bigboom... c'est pas la 5

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

**nebil** · 13/09/2008, 21h49

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 .

**bigboomshakala** · 13/09/2008, 23h29

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

**nebil** · 14/09/2008, 19h42

meme avec le tuto je trouve pas la solution

**Bovino** · 15/09/2008, 08h24

Code :

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

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

et :

Code :

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

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';
}

**nebil** · 15/09/2008, 08h40

slt Bovino ,

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

Code :

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

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 :

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

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>

**SpaceFrog** · 15/09/2008, 08h48

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

**Bovino** · 15/09/2008, 08h50

Code :

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

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

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

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

et

Code :

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

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

**nebil** · 15/09/2008, 08h58

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

**Bovino** · 15/09/2008, 09h03

Alors, peut-être :

Code :

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

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';
}
}

**nebil** · 15/09/2008, 09h10

non plus

http://nebilpro.free.fr/perso/menu.html

**Bovino** · 15/09/2008, 09h12

En fait, le onchange pose problème (le change est effectif après la perte de focus), essaye avec onclick :

Code :

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

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

**nebil** · 15/09/2008, 09h18

non plus , mais apparement SpaceFrog dit que le onchange ne fonctionne que sur le select et pas sur le Onchange !!!

**Bovino** · 15/09/2008, 09h38

Code :

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

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

Ca n'a rien à voir avec

Code :

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

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

**nebil** · 15/09/2008, 10h04

http://nebilpro.free.fr/perso/menu.html

**Bovino** · 15/09/2008, 10h10

Code :

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

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

si

Code :

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

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

colorer l'option d'une balise select

JavaScript

Discussions similaires

Partager

Partager