fonction avec Onchange

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:

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:

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>

Bonjour,

Code:

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

en ajoutant dans le <head> de ta page

Code:

window.onload = change;

A+

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

Citation:

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 ?

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

Citation:

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+

Ok !!! en tout cas grand merci à vous Mr E.Bzz pour ce coup de main... j'ai vraiment avancé j'y suis presque :yaisse2:
je continu de chercher en espérant qu'il y' aura quelqu'un qui a déjà eu un cas similaire pour me venir en aide...

Sous Firefox, les données des formulaires sont conservées lorsque l'on actualise la page ou lorsque l'on fait suivant/precendent.

Ca permet d'eviter de saisir plein de champs pour s'inscrire sur un site, cliquer sur suivant, se rappeler qu'on s'est trompé dans la premiere page, cliquer sur precedent et devoir tout resaisir.

Ce comportement, moi je le trouve tres bien.

Si tu veux reinitialiser ton formulaire, tu peux utiliser l'evenement onLoad de la balise BODY de ta page :

Code:

<body onLoad="reinitialiser();">

Citation:

Envoyé par buzzkaido

Ca permet d'eviter de saisir plein de champs pour s'inscrire sur un site, cliquer sur suivant, se rappeler qu'on s'est trompé dans la premiere page, cliquer sur precedent et devoir tout resaisir.

Ce comportement, moi je le trouve tres bien.

Pratique mais dangereux : si le site ne prévoit pas dans la page les fonctions "Précédent"/"Suivant", tu as des risques de générer des erreurs serveur / BDD.
En effet, la maj de la base, ainsi que la gestion des variables d'environnement du site dépendent souvent de ta navigation (cf. site d'achats en ligne avec panier, par ex.). En la modifiant à l'insu du serveur, tu risques de la perturber ;)

Le script "reinitialiser()" sur le onload, par contre, est peut-être une bonne solution pour ce cas ...

A+

Merci beaucoup Mr buzzkaido
Je viens de tester et ça marche comme sur des roulettes :yaisse2:
je suis super content...

En tout cas, encore une fois merci à vous E.Bzz et buzzkaido de votre coup de main qui m'aura été précieux sur ce coup... ça fait des jours que je cherchais et vous en 2... 2... vous me tirez d'affaire vous êtes des chefs !!!! :king:

E.Bzzz :

Ben pas vraiement, car les données du formulaire sont conservées, mais celui-ci n'est pas posté.

Sauf quand on recharge une page ayant POSTé des données (et non GETé des données) mais là, heureusement, IE comme FF previennent du risque.

BouroMpela :

Au fait, y'aurait pas un TP noté sur "faire apparaitre des listes en javascript" dans ton ecole en ce moment ?

Je dis ça pasque en une semaine, c'est peut-etre le 4éme thread demarré sur le sujet...

:lol:

Mdr :D non !!! pas du tout ! en fait, je suis en train de travailler sur un projet de création de site e-commerce et j'ai une page sur la quelle je présente le produit et si par exemple, l'utilisateur veut passer une commande, je lui donne la possibilité de choisir donc la quantité + la taille + la couleur cependant, dans la liste des quantités, s'il choisis 2 par exemple je fais apparaître 2 listes déroulantes lui permettant de choisir sa couleur pour chaque produit... le choix de la quantité va de 1 à 10 donc s'il choisis ben, il y'en aura 10 ainsi de suite...
je ne sais pas si je suis assez clair... j'ai du mal à expliquer un peu les choses des fois :lol: