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+

**BouroMpela** · 12/07/2007, 17h30

Ok !!! en tout cas grand merci à vous Mr E.Bzz pour ce coup de main... j'ai vraiment avancé j'y suis presque

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

**buzzkaido** · 13/07/2007, 09h51

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 :

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

<body onLoad="reinitialiser();">

**E.Bzz** · 13/07/2007, 09h58

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+

**BouroMpela** · 13/07/2007, 09h58

Merci beaucoup Mr buzzkaido
Je viens de tester et ça marche comme sur des roulettes

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

**buzzkaido** · 13/07/2007, 10h02

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.

**buzzkaido** · 13/07/2007, 10h04

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

**BouroMpela** · 13/07/2007, 10h11

Mdr

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

fonction avec Onchange

JavaScript

Discussions similaires

Partager

Partager