Discussion :

[algerino77]

Salut all

Voila, comme dit le titre, j'aimerai faire apparaitre/disparaitre des listes en fonctions des choix fait sur une autre liste..

Voila un code que j'ai réalisé pour exemple:

Code js :

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
<script type="text/javascript">
 
function display()
{  
    var td = document.getElementById('cacher');
 
    if(td.style.display == 'none')
    {
        td.style.display = 'block';
    }
    else
    {
        td.style.display = 'none';
    }
}
 
</script>

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
	<fieldset>
		<legend>Détails de votre commande de PC</legend>
	<table>
	<tr>
		<td><label>Choisissez-vous un PC pré-configuré:</label></td>
		<td><Select onchange="display();return false;" name="PcPreConfigure" required>
				<option selected="selected" name="PcPreConfigure" value=""></option> 
				<option  name="PcPreConfigure" value="Oui">Oui</option>
				<option  name="PcPreConfigure" value="Non">Non</option>
			</select></td>
 
		<td><Select style="display:none;" id="cacher" required>
				<option selected="selected"  value=""></option> 
				<option value="Oui">test1</option>
				<option value="Non">test2</option>
			</select></td>
 
		<td><Select style="display:none;" id="cacher" required>
				<option selected="selected"  value=""></option> 
				<option value="Oui">test3</option>
				<option value="Non">test4</option>
			</select></td>				
	</tr>	
	</table>
	</fieldset>

En gros j'aimerai que:
lorsqu'on choisi sur le première liste le choix "oui", la liste avec les choix "test1" et "test 2", apparait
lorsqu'on choisi sur le première liste le choix "non", la liste avec les choix "test3" et "test 4", apparait


Avec le code si dessus lorsqu'on choisi le choix "oui" ça fonctionne, mais pas avec le choix "non"...

J'y suis presque Merci d'avance pour votre aide!!

[Auteur]

bonjour,

- copier-coller 2 fois un code html avec des balises mal agencées (que vient faire le </select> après un </td> ?), c'est pas bien
- copier-coller en oubliant de modifier la valeur des id (id="cacher") des objets select, c'est pas bien
- oublier les balises <tr> dans un tableau, c'est pas bien non plus

[algerino77]

Salut!

bonjour,

- copier-coller 2 fois un code html avec des balises mal agencées (que vient faire le </select> après un </td> ?), c'est pas bien
- oublier les balises <tr> dans un tableau, c'est pas bien non plus

Corrigé! merci

- copier-coller en oubliant de modifier la valeur des id (id="cacher") des objets select, c'est pas bien

Il vient surement de la mon problème, mais je ne vois pas quoi changer dans le JS.. Pour les id je peux mettre un "cacher1" et un "cacher2" j'imagine, mais dans le JS apres, aucune idée..

[Auteur]

Pour les id je peux mettre un "cacher1" et un "cacher2" j'imagine, mais dans le JS apres, aucune idée..

c'est ça...

Ta première liste appelle la fonction display(). Rien ne t'empêche d'ajouter du code qui te permet de connaître l'option sélectionnée (FAQ Comment récupérer la valeur d'un select ?). Puis en fonction de la valeur tu affiches "cacher1" ou "cacher2".

[algerino77]

Erf, je galère un peu.. Non pas que c'est mal expliqué, au contraire, simplement que je débute en JS

En gros j'ai une ligne de code qui va ressembler à ca si j'ai bien compris? :

Code :

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

var td = document.getElementById('cacher1').options[1];

[Auteur]

Dans un premier temps tu as ton select :

Code html :

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

1
2
3
4
5
<select onchange="display(this);" id="PcPreConfigure" required>
	<option selected="selected" value="choix">Faites votre choix</option> 
	<option  value="Oui">Oui</option>
	<option  value="Non">Non</option>
</select>

tu ajoutes en paramètre à la fonction display l'objet appelant (argument this dans le code ci-dessus). Cela te permet de récupérer l'objet select dans ta fonction.
En passant le return false est sans intérêt ici. Ta liste a trois options ("Faites votre choix", "Oui", "Non").

Puis en javascript :

Code javascript :

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
function display(liste)
{
	var idx = liste.selectedIndex;		// index de l'option
 
	if (idx == 0)						// si index == 0 => option "faites votre choix"
		return;							// alors on part
 
	if (idx == 1)						// si index == 1 => option "oui"
	{
		// action : afficher liste 1
	}
 
	if (idx == 2)						// si index == 2 => option "non"
	{
		// action : afficher liste 2
	}	
 
}

mais attention, si l'utilisateur change d'avis en passant de oui à non ou de non à oui avec la 1ère liste

[Golgotha]

En complément de la réponse de Auteur, voici un exemple de l'utilisation du javascript avec la balise <select> sur jsfidle : http://jsfiddle.net/s2xhdy7q/

Attention algerino77, dans ton code tu as mis Select avec un S, la balise s'écrit en minuscule : select.

[algerino77]

Auteur.
Merci! Voilà ce que j'ai rajouté à ton code et qui permet le fonctionnement:

Code JS :

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
function display(liste)
{
	var idx = liste.selectedIndex;		// index de l'option
 
	if (idx == 0)						// si index == 0 => option "faites votre choix"
		return;							// alors on part
 
	if (idx == 1)						// si index == 1 => option "oui"
	{
		cacher1.style.display = 'block';
		cacher2.style.display = 'none';
	}
 
	if (idx == 2)						// si index == 2 => option "non"
	{
		cacher1.style.display = 'none';
		cacher2.style.display = 'block';
	}	
 
}
 
</script>

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
	<fieldset>
		<legend>Petit Test</legend>
			<table>
				<tr>
					<td><label>Test:</label></td>
					<td><select onchange="display(this);" id="Choix" required>
							<option selected="selected" value="choix">Faites votre choix</option> 
							<option  value="Oui">Oui</option>
							<option  value="Non">Non</option>
						</select>
					</td>
 
					<td><select style="display:none;" id="cacher1" required>
							<option selected="selected"  value="liste 1 et 2">liste 1 et 2</option> 
							<option value="test1">test1</option>
							<option value="test2">test2</option>
						</select>
					</td>
 
					<td><select style="display:none;" id="cacher2" required>
							<option selected="selected"  value="liste 3 et 4">liste 3 et 4</option> 
							<option value="test3">test3</option>
							<option value="test4">test4</option>
						</select>
					</td>				
				</tr>	
			</table>
	</fieldset>

Par contre comme tu dis, si l'utilisateur fait joujou, niveau affichage ca va (y'a juste un décalage d'un ou 2 px) mais mon required ne peut plus marcher..
Impossible de l'utiliser dans ce cas?



Golgotha.
Merci c'est corrigé!
Et merci pour ton exemple, mais ça devient un peu trop compliqué pour mes connaissances en JS

[Auteur]

Code :

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

1
2
3
 
		cacher1.style.display = 'block';
		cacher2.style.display = 'none';

cette syntaxe est à éviter à tout prix ! FAQ : Pourquoi faut-il toujours déclarer ses variables ?
Ecris :

Code :

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

1
2
3
 
		document.getElementbyId("cacher1").style.display = 'block';
		document.getElementbyId("cacher2").style.display = 'none';

Pour la liste je n'ai pas fait de document.getElementById() car l'objet est passé en argument.

[algerino77]

Parfait! Tout est corrigé et fonctionnel!

Grand merci pour votre patiente et votre aide!

A bientôt