Faire apparaitre/disparaitre une liste en fonction des choix sur une autre liste

Version imprimable

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:

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:

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

20/10/2014, 19h58
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 :aie:
- copier-coller en oubliant de modifier la valeur des id (id="cacher") des objets select, c'est pas bien :aie:
- oublier les balises <tr> dans un tableau, c'est pas bien non plus :aie:
20/10/2014, 20h55
algerino77

Salut!

Citation:

Envoyé par 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 :aie:
- oublier les balises <tr> dans un tableau, c'est pas bien non plus :aie:

Corrigé! merci :D

Citation:

Envoyé par Auteur

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

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..
20/10/2014, 22h56
Auteur

Citation:

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".
21/10/2014, 00h04
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:

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

Dans un premier temps tu as ton select :
Code:

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:

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 :whistle:

21/10/2014, 10h57
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.

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

Code:

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:

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 :)

21/10/2014, 12h41
Auteur
Citation:
Envoyé par algerino77

Code:

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:

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.
21/10/2014, 18h08
algerino77

Parfait! Tout est corrigé et fonctionnel!

Grand merci pour votre patiente et votre aide!

A bientôt :)