fonction avec Onchange

**BouroMpela** · 12/07/2007, 16h16

Bonjour à toutes et à tous,
Je suis nouveau sur le forum et débutant en javascript. Je me suis inscrit car j'ai besoin d'aide...
Grand merci d'avance à ceux ou à celles qui vondront bien m'aider.

Mon problème est le suivant :

J'ai une liste déroulante qui propose un choix allant de 1 à 10 et si on sélectionne 1 par exemple, mon script génère automatiquement une 2eme liste déroulante proposant elle un choix de couleur. Si on sélectionne 2 il en générera 2 ainsi de suite... Par défaut, quand j'arrive sur ma page j'ai juste la 1ere liste déroulante qui est affichée et ce que je souhaiterais c'est
que quand j'arrive sur ma page, le choix 1 soit sélectionné par défaut dans la première liste et qu'il y ait déjà la liste déroulante concernant le choix de la couleur d'affichée aussi... est ce possible ?

Code javascritp:
---------------

Code :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<script type="text/javascript">
function change(){		
	var choix = document.getElementById('choix');	
	if(choix.value == 'rien'){
		document.getElementById('1').style.display  = 'none';
		document.getElementById('2').style.display  = 'none';
		document.getElementById('3').style.display  = 'none';
		document.getElementById('4').style.display  = 'none';
		document.getElementById('5').style.display  = 'none';
		document.getElementById('6').style.display  = 'none';
		document.getElementById('7').style.display  = 'none';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '1'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display  = 'none';
		document.getElementById('3').style.display  = 'none';
		document.getElementById('4').style.display  = 'none';
		document.getElementById('5').style.display  = 'none';
		document.getElementById('6').style.display  = 'none';
		document.getElementById('7').style.display  = 'none';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '2'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display  = 'none';
		document.getElementById('4').style.display  = 'none';
		document.getElementById('5').style.display  = 'none';
		document.getElementById('6').style.display  = 'none';
		document.getElementById('7').style.display  = 'none';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '3'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display = 'block';
		document.getElementById('4').style.display  = 'none';
		document.getElementById('5').style.display  = 'none';
		document.getElementById('6').style.display  = 'none';
		document.getElementById('7').style.display  = 'none';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '4'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display = 'block';
		document.getElementById('4').style.display = 'block';
		document.getElementById('5').style.display  = 'none';
		document.getElementById('6').style.display  = 'none';
		document.getElementById('7').style.display  = 'none';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '5'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display = 'block';
		document.getElementById('4').style.display = 'block';
		document.getElementById('5').style.display = 'block';
		document.getElementById('6').style.display  = 'none';
		document.getElementById('7').style.display  = 'none';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '6'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display = 'block';
		document.getElementById('4').style.display = 'block';
		document.getElementById('5').style.display = 'block';
		document.getElementById('6').style.display = 'block';
		document.getElementById('7').style.display  = 'none';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '7'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display = 'block';
		document.getElementById('4').style.display = 'block';
		document.getElementById('5').style.display = 'block';
		document.getElementById('6').style.display = 'block';
		document.getElementById('7').style.display = 'block';
		document.getElementById('8').style.display  = 'none';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '8'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display = 'block';
		document.getElementById('4').style.display = 'block';
		document.getElementById('5').style.display = 'block';
		document.getElementById('6').style.display = 'block';
		document.getElementById('7').style.display = 'block';
		document.getElementById('8').style.display = 'block';
		document.getElementById('9').style.display  = 'none';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '9'){
		document.getElementById('1').style.display = 'block';
		document.getElementById('2').style.display = 'block';
		document.getElementById('3').style.display = 'block';
		document.getElementById('4').style.display = 'block';
		document.getElementById('5').style.display = 'block';
		document.getElementById('6').style.display = 'block';
		document.getElementById('7').style.display = 'block';
		document.getElementById('8').style.display = 'block';
		document.getElementById('9').style.display = 'block';
		document.getElementById('10').style.display = 'none';
	}
	if(choix.value == '10'){
		document.getElementById('1').style.display  = 'block';
		document.getElementById('2').style.display  = 'block';
		document.getElementById('3').style.display  = 'block';
		document.getElementById('4').style.display  = 'block';
		document.getElementById('5').style.display  = 'block';
		document.getElementById('6').style.display  = 'block';
		document.getElementById('7').style.display  = 'block';
		document.getElementById('8').style.display  = 'block';
		document.getElementById('9').style.display  = 'block';
		document.getElementById('10').style.display = 'block';
	}
}
</script>

code formulaire html :
-------------------

Code :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<select  id="choix" onChange="change()">
		    <option value="rien" ></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
		</select>  
		<select id="1" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="2" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="3" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="4" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="5" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="6" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="7" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="8" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="9" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>
		<select id="10" style="display:none">
			<option value="rouge">Rouge</option>
			<option value="vert">Vert</option>
			<option value="jaune">Jaune</option>
			<option value="noir">Noir</option>
			<option value="gris">Gris</option>		
		</select>

**E.Bzz** · 12/07/2007, 16h27

Bonjour,

Code :

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

<option value="1" selected="selected">1</option>

en ajoutant dans le <head> de ta page

Code :

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

window.onload = change;

A+

**BouroMpela** · 12/07/2007, 16h51

Merci beaucoup Mr E.Bzz pour votre réponse et pour la rapidité de celle ci!!! car ça fait un petit moment que je cherchais la solution à mon problème

tout fonctionne très bien à présent !!!

juste une petite question encore, j'ai constaté que quand par exemple je sélectionne 10 dans ma première liste...

et que j'actualise la page, le 10 reste sélectionné et j'ai toujours mes 10 listes proposant la couleur d'affichées...

est ce qu'il y'a moyen que quand j'actualise la page, que la sélectionne retourne par défaut à 1 et d'avoir juste une liste proposant la couleur d'affichée ?

**E.Bzz** · 12/07/2007, 16h55

Envoyé par BouroMpela

est ce qu'il y'a moyen que quand j'actualise la page, que la sélectionne retourne par défaut à 1 et d'avoir juste une liste proposant la couleur d'affichée ?

Heu ... normallement ça devrait être le cas

Comment est-ce que tu actualises la page ?

**BouroMpela** · 12/07/2007, 16h59

avec le bouton actualiser dans la barre du navigateur...

**E.Bzz** · 12/07/2007, 17h18

Envoyé par BouroMpela

avec le bouton actualiser dans la barre du navigateur...

Je pense que c'est plus un pb lié au nav (pb cache ?) qu'à ta page.
Si je fais ça sous IE, mes select reprennent leur valeur initiale ...
A ma connaissance, ça devrait le faire en utilisant le bouton "Précédent", par ex., mais pas "Actualiser".

Mais qq1 d'autre aura peut-être une solution ...

A+

fonction avec Onchange

JavaScript

Vue hybride

Discussions similaires

Partager

Partager