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

Select/Option Multiple sur même page

jQuery

Mode arborescent

Discussions similaires

Partager

Partager