Modifier la couleur Liste déroulante

**apdf1** · 27/06/2017, 08h02

Bonjour

Sur ma page j'ai une liste déroulante qui fonctionne très bien et j'aimerai lui apporter une modification si possible.Lorsque je sélectionne une région j’aimerai que la région sélectionne reste avec un fond bleu pour signaler le nom de la région.
Je vous jpont mon code de la liste déroulante.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<table class="element_fixe0"  border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
		<tr><td class="list_deroul">
				                                Choisissez une autre Région :    
            </td></tr><tr><td>
                <br>
				<SELECT name="departementSelect" onchange="javascript:location.href=this.options[this.selectedIndex].value;">
 
                    <OPTION>--- Choisir une Région ---</OPTION>
 
                    <optgroup label="Metropole">
 
 
                         <OPTION value="Bourgogne_Franche_Comte.html">Auvergne Rhône alpes</OPTION>						
						  <OPTION value="Bretagne.html">Bretagne</OPTION>						
						   <OPTION value="Centre_Val_de_Loire.html">Centre-Val de Loire</OPTION>						
						    <OPTION value="Corse.html">Corse</OPTION>						
						     <OPTION value="Grand_Est.html">Grand Est</OPTION>						
						      <OPTION value="Hauts_de_France.html">Hauts-de-France</OPTION>						
						      <OPTION value="Île_de_France.html">Île-de-France</OPTION>						
						     <OPTION value="Normandie.html">Normandie</OPTION>						
						    <OPTION value="Nouvelle_Aquitaine.html">Nouvelle-Aquitaine</OPTION>						
						   <OPTION value="Occitanie.html">Occitanie</OPTION>						
						 <OPTION value="Pays_de_la_Loire.html">Pays de la Loire</OPTION>						
						<OPTION value="Provence_Alpes_Côte_d_Azur.html">Provence-Alpes-Côte d'Azur</OPTION>						
								 </optgroup>		 
		 <optgroup label="Outre-mer"> 
                        <OPTION value="Guadeloupe.html">Guadeloupe</OPTION>						
						 <OPTION value="Guyane.html">Guyane (française)</OPTION>						
						  <OPTION value="Martinique.html">Martinique</OPTION>						
						 <OPTION value="Reunion.html">Réunion</OPTION>						
						<OPTION value="Mayotte.html">Mayotte</OPTION>						
 
					</optgroup>	
				</SELECT>
 
            </td></tr></table>

je vous remercie d'avance

Cordialement

Max

**paoli121** · 27/06/2017, 10h07

Ok c'est de ça tu parle??

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table class="element_fixe0"  border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
		<tr><td class="list_deroul">
		                                Choisissez une autre Région :    
    </td></tr><tr><td>
        <br>
		<SELECT name="departementSelect" id="region">
 
            <option>--- Choisir une Région ---</option>
 
            <optgroup label="Metropole">
 
 
                 <option value="Bourgogne_Franche_Comte.html">Auvergne Rhône alpes</option>						
				  <option value="Bretagne.html">Bretagne</option>						
				   <option value="Centre_Val_de_Loire.html">Centre-Val de Loire</option>						
				    <option value="Corse.html">Corse</option>						
				     <option value="Grand_Est.html">Grand Est</option>						
				      <option value="Hauts_de_France.html">Hauts-de-France</option>						
				      <option value="Île_de_France.html">Île-de-France</option>						
				     <option value="Normandie.html">Normandie</option>						
				    <option value="Nouvelle_Aquitaine.html">Nouvelle-Aquitaine</option>						
				   <option value="Occitanie.html">Occitanie</option>						
				 <option value="Pays_de_la_Loire.html">Pays de la Loire</option>						
				<option value="Provence_Alpes_Côte_d_Azur.html">Provence-Alpes-Côte d,Azur</option>						
						 </optgroup>		 
 <optgroup label="Outre-mer"> 
                <option value="Guadeloupe.html">Guadeloupe</option>						
				 <option value="Guyane.html">Guyane (française)</option>						
				  <option value="Martinique.html">Martinique</option>						
				 <option value="Reunion.html">Réunion</option>						
				<option value="Mayotte.html">Mayotte</option>						
 
			</optgroup>	
		</SELECT>
 
    </td></tr></table>
 
    <script>
        var all_option = document.getElementsByTagName("option"),parent_option = document.getElementById("region");
        
        parent_option.addEventListener("change",function(){
                var current_region = this.value;
                for (var i = all_option.length - 1; i >= 0; i--) {
                        var current_option = all_option[i].getAttribute("value"),b = ""; c = "";
                        if (current_region == current_option) {
                                b = "blue"; c = "white";
                        }
                        all_option[i].style.background = b;
                        all_option[i].style.color = c;
                }       
        })
    </script>
</body>
</html>

FIN EXECUTE VOIR

**apdf1** · 27/06/2017, 12h01

Salut Paoli

Ont doit être de la même iles je te remercie Nickel

Max

Modifier la couleur Liste déroulante

JavaScript

Discussions similaires

Partager

Partager