Select/Option Multiple sur même page

Version imprimable

1 pièce(s) jointe(s)

Bonjour à toutes et tous,

Je viens chercher un petit coup de pouce s'il vous plait.
Voici ma problématique.
Dans plusieurs tableaux, les uns en dessous des autres, je voudrais faire apparaître un texte en fonction d'un choix dans un menu.
J'ai trouvé un bout de code en JavaScript qui permet de faire cette fonction.
Pour mon premier cas, cela fonctionne mais lorsque je passe au "choix suivant", mon premier texte affiché est retiré.

Ma question est : est-il possible d'utiliser la fonction "affichage/masquage" plusieurs fois dans une même page ? Je pense que oui mais je me plante dans mon code. Surement dans l'attribution des variables.

Pourriez vous me guider s'il vous plait ? :)
Voici mon code

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>MultiSelect</title>
<script type="text/javascript">
        function imprimer_page(){
          window.print();
        }
</script>
<style>
        .masquer{
                display:none;
        }
        
        .afficher{
                display:block;
        }
</style>
</head>
 
<body>
 
<h1>MultiSelect</h1>
 
<TABLE BORDER>
	<TR>
		<TD>Coucou<br>
			<i>Hello</i>
		</TD>
		<TD>
			<select id="Coucou"> 
			   <option value="" selected="selected"></option>
			   <option value="Choix1">Choix1</option>
			   <option value="Choix2">Choix2</option> 
			   <option value="Choix3">Choix3</option> 
			   <option value="OtherChoice">Other Choice</option> 
			</select>
			<img src="img/std.png" title="test"/>
		</TD>
		<TD>
			<div id="Choix1" class="masquer">
			Display Choice 1<br/>
			<i><font size="2px">Affichage choix 1</font></i>
			</div>
			<div id="Choix2" class="masquer">
			Display Choice 2<br/>
			<i><font size="2px">Affichage choix 2</font></i>
			</div>
			<div id="Choix3" class="masquer">
			Display Choice 3<br/>
			<i><font size="2px">Affichage choix 3</font></i>
			</div>
			<div id="OtherChoice" class="masquer">
			<textarea rows="1" cols="50" name="comment" required></textarea>
			</div>
		</TD>
	</TR>
</TABLE>
		<!-- include jQuery library --> 
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script> 
		<script>                        
                        $("#Coucou").change(function () {
                                select = document.getElementById("Coucou");
                                choice = select.selectedIndex;
                                valeur = select.options[choice].value;
 
                                $(".afficher").removeClass("afficher").addClass("masquer"); 
                                
                                if(valeur == "Choix1"){
                                        $("#Choix1").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "Choix2"){
                                        $("#Choix2").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "Choix3"){
                                        $("#Choix3").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "OtherChoice"){
                                        $("#OtherChoice").removeClass("masquer").addClass("afficher");
                                }
                        });
                </script>
<TABLE BORDER>
	<TR>
		<TD>Bye<br/>
			<i>Aurevoir</i>
		</TD>
		<TD>
			<select id="Bye"> 
			   <option value="" selected="selected"></option>
			   <option value="Choix4">Choix 4</option>
			   <option value="Choix5">Choix 5</option> 
			   <option value="OtherChoicebis">Other Choice Bise</option> 
			</select>
			<img src="img/std.png" title="test"/>
		</TD>
		<TD>
			<div id="Choix4" class="masquer">
			Display Choice 4<br/>
			 <i><font size="2px">Affichage Choix 4</font></i>
			</div>
			<div id="Choix5" class="masquer">
			Display Choice 5<br/>
			<i><font size="2px">Affichage Choix 5</font></i>
			</div>
			<div id="OtherChoicebis" class="masquer">
			<textarea rows="1" cols="50" name="comment" required></textarea>
			</div>
		</TD>
	</TR>
</TABLE>
		<script>
                        $("#Bye").change(function () {
                                select = document.getElementById("Bye");
                                choice = select.selectedIndex;
                                valeur = select.options[choice].value;
 
                                $(".afficher").removeClass("afficher").addClass("masquer"); 
                                
                                if(valeur == "Choix4"){
                                        $("#Choix4").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "Choix5"){
                                        $("#Choix5").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "OtherChoicebis"){
                                        $("#OtherChoicebis").removeClass("masquer").addClass("afficher");
                                }
                        });
                </script>	
<p>
	<form>
		<input id="impression" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
	</form>
</p>
 
</body>
</html>

Je mets en PJ le fichier jquery-3.1.1.js si besoin.
En vous remerciant,

Gaëtan

11/03/2017, 12h22
Watilin

Salut,

tu as un problème ici :

Code:

$(".afficher").removeClass("afficher").addClass("masquer");

En ciblant $(".afficher") tu touches à tous les éléments ayant la classe afficher dans toute la page.

Comme solution tu peux ajouter un id à chacune de tes tables et sélectionner par exemple $("#tableCoucou .afficher"), ou bien remonter à la table contenant le select :

Code:

$(select).closest("table").find(".afficher").removeClass("afficher").addClass("masquer");
11/03/2017, 15h15
gaett

Merci pour ta réponse, je teste au plus vite :)

Merci Watilin pour ta contribution, j'ai testé, ça fonctionne !
J'ai par contre trouver une alternative quelque chose de plus simple en jouant avec le style :

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
138
139
140
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>MultiSelect</title>
<script type="text/javascript">
        function imprimer_page(){
          window.print();
        }
</script>
<style>
        .masquer{
                display:none;
        }
        .afficher{
                display:block;
        }
        
        .masquer1{
                display:none;
        }
        .afficher1{
                display:block;
        }
</style>
</head>
 
<body>
 
<h1>MultiSelect</h1>
 
<TABLE BORDER>
	<TR>
		<TD>Coucou<br>
			<i>Hello</i>
		</TD>
		<TD>
			<select id="Coucou"> 
			   <option value="" selected="selected"></option>
			   <option value="Choix1">Choix1</option>
			   <option value="Choix2">Choix2</option> 
			   <option value="Choix3">Choix3</option> 
			   <option value="OtherChoice">Other Choice</option> 
			</select>
			<img src="img/std.png" title="test"/>
		</TD>
		<TD>
			<div id="Choix1" class="masquer">
			Display Choice 1<br/>
			<i><font size="2px">Affichage choix 1</font></i>
			</div>
			<div id="Choix2" class="masquer">
			Display Choice 2<br/>
			<i><font size="2px">Affichage choix 2</font></i>
			</div>
			<div id="Choix3" class="masquer">
			Display Choice 3<br/>
			<i><font size="2px">Affichage choix 3</font></i>
			</div>
			<div id="OtherChoice" class="masquer">
			<textarea rows="1" cols="50" name="comment" required></textarea>
			</div>
		</TD>
	</TR>
</TABLE>
		<!-- include jQuery library --> 
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script> 
		<script>                        
                        $("#Coucou").change(function () {
                                select = document.getElementById("Coucou");
                                choice = select.selectedIndex;
                                valeur = select.options[choice].value;
 
                                $(".afficher").removeClass("afficher").addClass("masquer"); 
                                
                                if(valeur == "Choix1"){
                                        $("#Choix1").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "Choix2"){
                                        $("#Choix2").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "Choix3"){
                                        $("#Choix3").removeClass("masquer").addClass("afficher");
                                }else if(valeur == "OtherChoice"){
                                        $("#OtherChoice").removeClass("masquer").addClass("afficher");
                                }
                        });
                </script>
<TABLE BORDER>
	<TR>
		<TD>Bye<br/>
			<i>Aurevoir</i>
		</TD>
		<TD>
			<select id="Bye"> 
			   <option value="" selected="selected"></option>
			   <option value="Choix4">Choix 4</option>
			   <option value="Choix5">Choix 5</option> 
			   <option value="OtherChoicebis">Other Choice Bise</option> 
			</select>
			<img src="img/std.png" title="test"/>
		</TD>
		<TD>
			<div id="Choix4" class="masquer1">
			Display Choice 4<br/>
			 <i><font size="2px">Affichage Choix 4</font></i>
			</div>
			<div id="Choix5" class="masquer1">
			Display Choice 5<br/>
			<i><font size="2px">Affichage Choix 5</font></i>
			</div>
			<div id="OtherChoicebis" class="masquer1">
			<textarea rows="1" cols="50" name="comment" required></textarea>
			</div>
		</TD>
	</TR>
</TABLE>
		<script>
                        $("#Bye").change(function () {
                                select = document.getElementById("Bye");
                                choice = select.selectedIndex;
                                valeur = select.options[choice].value;
 
                                $(".afficher1").removeClass("afficher1").addClass("masquer1"); 
                                
                                if(valeur == "Choix4"){
                                        $("#Choix4").removeClass("masquer1").addClass("afficher1");
                                }else if(valeur == "Choix5"){
                                        $("#Choix5").removeClass("masquer1").addClass("afficher1");
                                }else if(valeur == "OtherChoicebis"){
                                        $("#OtherChoicebis").removeClass("masquer1").addClass("afficher1");
                                }
                        });
                </script>	
<p>
	<form>
		<input id="impression" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
	</form>
</p>
 
</body>
</html>

Merci encore par avance pour ta contribution rapide !

Gaëtan