Select/Option Multiple sur même page

**gaett** · 11/03/2017, 09h30

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

**Watilin** · 11/03/2017, 12h22

Salut,

tu as un problème ici :

Code :

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

$(".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 :

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

$(select).closest("table").find(".afficher").removeClass("afficher").addClass("masquer");

**gaett** · 11/03/2017, 15h15

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

**gaett** · 12/03/2017, 17h39

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

Select/Option Multiple sur même page

jQuery

Discussions similaires

Partager

Partager