Afficher un div depuis un menu déroulant [Résolu]

PascalAC21 · 11/01/2012, 17h54

Bonjours à tous,

je suis très débutant en web. Je n'ai réalisé qu'un petit site à ce jour, et qui ne présentait aucune complexité.

Je cherche aujourd'hui à établir un formulaire de commande en interne, qui pourra être utilisé quelque soit le fournisseur.
J'ai donc choisi de faire un petit menu déroulant qui doit faire apparaître toutes les coordonnées utiles du fournisseur choisi, afin de ne pas avoir à les rechercher en permanence.

J'ai recherché un peu partout comment faire et j'ai essayé d'adapté plusieurs solutions, mais je n'y parviens pas.
Ma page est créé sur GoLive.

Merci pour votre aide.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Page sans titre</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css" media="screen"><!--
#calque1   { visibility: visible; position: absolute; z-index: 1; top: 18px; left: 15px; width: 200px; height: 47px }
#calque2  { visibility: visible; position: absolute; z-index: 1; top: 65px; left: 15px; width: 200px; height: 100px }
#calque3   { visibility: visible; position: absolute; z-index: 1; top: 38px; left: 250px; width: 400px; height: 70px }
#calque4     { visibility: visible; position: absolute; z-index: 2; top: 38px; left: 700px; width: 200px; height: 60px }
#calque5    { visibility: visible; position: absolute; z-index: 1; top: 18px; left: 710px; width: 200px; height: 30px }
#DateAutomatique    { visibility: visible; position: absolute; z-index: 2; top: 98px; left: 260px; width: 180px; height: 20px }
#calque6     { visibility: visible; position: absolute; z-index: 3; top: 98px; left: 470px; width: 70px; height: 20px }
#calque7    { visibility: visible; position: absolute; z-index: 4; top: 98px; left: 520px; width: 150px; height: 30px }
#calque9   { visibility: visible; position: absolute; z-index: 5; top: 150px; left: 15px; width: 650px; height: 430px }
#calque10     { visibility: visible; position: absolute; z-index: 4; top: 140px; left: 12px; width: 52px; height: 46px }
<!-- j’ai diminué la taille de la police pour les calques précédents, parce qu’ils ne sont pas concernés par mon problème. Par contre, je ne sais pas si le fait qu’ils existent change le problème, je les ais donc laissés. -->
#fournisseur    { visibility: visible; position: absolute; z-index: 5; top: 175px; left: 780px; width: 150px; height: 30px }
#calque12    { visibility: visible; position: absolute; z-index: 5; top: 150px; left: 780px; width: 150px; height: 20px }
#calque13   { position: absolute; z-index: 5; top: 210px; left: 780px; width: 160px; height: 300px }
#calque14   { position: absolute; z-index: 5; top: 210px; left: 780px; width: 160px; height: 300px }
#calque15   { position: absolute; z-index: 5; top: 210px; left: 780px; width: 160px; height: 300px }
#calque16   { position: absolute; z-index: 5; top: 210px; left: 780px; width: 160px; height: 300px }
#calque17   { position: absolute; z-index: 5; top: 210px; left: 780px; width: 160px; height: 300px }
.divhidden {
display: none;
}
--></style>
 <script type="text/javascript" language="Javascript" > 
<!--
	var choix;
 
	function facile()
	{
		if (document.fournisseurs.selectFournisseurs.value == "ch1")
		choix = "ch1" ;
		else
		if (document.fournisseurs.selectFournisseurs.value == "ch2")
		choix = "ch2";
		else
		if (document.fournisseurs.selectFournisseurs.value == "ch3")
		choix = "ch3";
		else
		if (document.fournisseurs.selectFournisseurs.value == "ch4")
		choix = "ch4";
		else
		if (document.fournisseurs.selectFournisseurs.value == "ch5")
		choix = "ch5";
 
<!-- lignes à rajouter pour effacer tous les calques avant d’afficher le bon--> 
 
		if (document.all)
		document.all(choix).style.display = "block";
		else
		document.getElementById(choix).style.display = "block";
	}
 
	function look()
	{
		if (document.all)
		document.all(choix).style.display = "none";
		else
		{document.getElementById(choix).style.display = "none";}
		document.fournisseurs.selectFournisseurs.disabled = " ";
	}
//-->
</script>
 </head>
 
<body bgcolor="#ffffff">
<!—j’ai effacé les premiers calques qui n’ont rien à voir avec les suivants pour raccourcir un peu le code -->
	<div id="fournisseur">
	<form id="fournisseurs" method="post" name="fournisseurs" action=" ">
			<select name="selecFournisseurs" class="formulaire" size="1" onchange="facile()">
				<option></option>
				<option value="ch1">CHOIX1</option>
				<option value="ch2">CHOIX2</option>
				<option value="ch3">CHOIX3</option>
				<option value="ch4">CHOIX4</option>
				<option value="ch5">CHOIX5</option>
			</select>
	</form>
	</div>
	<div id="calque12">
		<div class="text4">
	<p class="text4"><b><font color="#f52737">Fournisseur</font></b></p>
		</div>
	</div>
	<div id="calque13" class="divhidden">
		<p class="text4"><i><u>n&deg; Client</u></i><br>
					######<br>
					<br>
					<i><u>
					Coordonn&eacute;es</u></i><br>
					Tel. ##############<br>
					Fax. ##############<br>
					<a href="mailto:mail@mail.fr">mail@mail.fr</a></p>
	</div>
	<div id="calque14" class="divhidden">
		<p class="text4">
			<i><u>n&deg; Client</u></i><br>
			##############<br>
			<br>
			<i><u>Contact</u></i><br>
			Robert Lafont<br>
			Tel. ##############<br>
			<br>
			<i><u>Coordonn&eacute;es</u></i><br>
			Fax. ##############<br>
			8h30-12h30<br>
			13h30-18h30
		</p>
	</div>
<!-- j'ai effacé le div 15 à 17, qui sont quasi identique aux 13 et 14, mis à part un input text à la place du numéro client -->
	</body>
 
</html>

NoSmoking · 12/01/2012, 22h51

Bonsoir,
tu t'en sortirais mieux en passant l'objet SELECT, via le mot clé this, à la fonction

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
</style>
<script type="text/javascript">
function fctChange( objet){
  alert( objet.value);
}
</script>
</head>
<body>
<select name="selecFournisseurs" class="formulaire" size="1" onchange="fctChange(this)">
  <option></option>
  <option value="ch1">CHOIX1</option>
  <option value="ch2">CHOIX2</option>
  <option value="ch3">CHOIX3</option>
  <option value="ch4">CHOIX4</option>
  <option value="ch5">CHOIX5</option>
</select>
</body>
</html>

PascalAC21 · 13/01/2012, 10h41

Merci de ta réponse.

Je vais tester sur ma page (le code ne me "parle" pas trop juste en le regardant comme ça.

PascalAC21 · 18/01/2012, 15h43

Bonjour,

j'ai essayé pas mal de choses, mais je ne vois pas comment appliquer ta solution à ma page.

Du coup, j'ai commencé à lire des cours de CSS et de javascript, et j'ai changer un peu de code (j'avais trouvé le précédent sur le web et j'avais tenté de l'adapter à mes besoins, d'habitude, ça marche) :

Je n'ai gardé qu'un seul <div> avec visibility:visible, contenant des paragraphes h1, h2, h3 .... en conservant leurs id et avec l'attribut class = "hidden". Et j'ai rajouté dans les styles :

Code HTML :

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

1
2
 
.hidden {display: none;}

Donc tous les éléments de class="hidden" sont non présent.

Puis j'ai tenté ce 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
 
<script type="text/javascript" language="Javascript" >
<!--
	function fctChange(selectfournisseurs) {
 
		document.getElementsByClassName("hidden").style.display = "none";
		var choixfournisseurs = document.ListFournisseurs.fournisseurs.selectfournisseurs.value;
		switch (choixfournisseurs) {
			case "ch1":
				document.getElementById("Ch1").style.display = "block";
			break;
			case "ch2":
				document.getElementById("Ch2").style.display = "block";
			break;
			case "ch3":
				document.getElementById("Ch3").style.display = "block";
			break;
			case "ch4":
				document.getElementById("Ch4").style.display = "block";
			break;
			case "ch5":
				document.getElementById("Ch5").style.display = "block";
			break;
		}
	}

La première ligne pour rendre non présent tous les éléments de class="hidden", dans le cas où on se tromperait de choix.
La variable pointe id du div, puis du formulaire, puis du menu déroulant.
J'ai trouvé switch plus simple à écrire que if else if... dans ce cas pour le même résultat si j'ai bien compris.

J'ai laissé le mot code this dans l'appel de la fonction, mais j'ai eu un peu de mal à trouver comment exactement il s'utilise.

Evidemment, cela ne marche pas. Mais je ne vois pas pourquoi.
Serait-il possible de me dire ce que je ne fais pas correctement ?

Merci.

NoSmoking · 19/01/2012, 22h48

je te mets une façon de procéder ci dessous sous forme d'un exemple complet

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.hidden {
  display : none;
  border : 1px solid #e0e0e0;
  width : 250px;
  height : 200px;
}
</style>
<script type="text/javascript">
function fctChange( objet){
  var sRadical = 'div_';
  var indice = 1;
  // élément devant être afiché
  var oVisible = document.getElementById( objet.value || 0);
  // tant qu'il existe un élément avec id div_x
  while( ( oDiv = document.getElementById( sRadical +indice))){
    // affecte le style suivant le cas
    oDiv.style.display = oDiv == oVisible ? 'block' : 'none';
    // indice suivant
    indice++;
  }
}
</script>
</head>
<body>
<select name="selecFournisseurs" class="formulaire" size="1" onchange="fctChange(this)">
  <option></option>
  <option value="div_1">CHOIX1</option>
  <option value="div_2">CHOIX2</option>
  <option value="div_3">CHOIX3</option>
  <option value="div_4">CHOIX4</option>
  <option value="div_5">CHOIX5</option>
  <option value="div_6">CHOIX6</option>
</select>
<div id="div_1" class="hidden">Texte de la DIV id="div_1"</div>
<div id="div_2" class="hidden">Texte de la DIV id="div_2"</div>
<div id="div_3" class="hidden">Texte de la DIV id="div_3"</div>
<div id="div_4" class="hidden">Texte de la DIV id="div_4"</div>
<div id="div_5" class="hidden">Texte de la DIV id="div_5"</div>
</body>
</html>

Citation:

J'ai laissé le mot code this dans l'appel de la fonction, mais j'ai eu un peu de mal à trouver comment exactement il s'utilise.

le this représente l'objet SELECT et on le passe à la fonction ce qui permet de ne pas avoir à le récupérer via son ID par exemple.

PascalAC21 · 24/01/2012, 16h28

Merci beaucoup.

Ta solution marche super sur safari et sur firefox (sur ce dernier, si l'on clique sur un premier puis un second choix, le second s'affiche à la suite du premier, au lieu de le remplacer).

J'ai simplement insérer le tout dans un autre div avec une position fixe. Parce que l'ajout de top et left dans le .hidden ne fonctionne pas : les informations s'affiche par défaut en 0/0. Je n'ai donc laissé dan le .hidden que le display.

Je vais donc pouvoir maintenant regarder comment cela fonctionne.

MErci encore.

13/01/2012, 10h41	#3
PascalAC21 Candidat au titre de Membre du Club Inscription : janvier 2012 Messages : 27 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 27 Points : 14 Points : 14	Merci de ta réponse. Je vais tester sur ma page (le code ne me "parle" pas trop juste en le regardant comme ça.
	00

24/01/2012, 16h28	#6
PascalAC21 Candidat au titre de Membre du Club Inscription : janvier 2012 Messages : 27 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 27 Points : 14 Points : 14	Merci beaucoup. Ta solution marche super sur safari et sur firefox (sur ce dernier, si l'on clique sur un premier puis un second choix, le second s'affiche à la suite du premier, au lieu de le remplacer). J'ai simplement insérer le tout dans un autre div avec une position fixe. Parce que l'ajout de top et left dans le .hidden ne fonctionne pas : les informations s'affiche par défaut en 0/0. Je n'ai donc laissé dan le .hidden que le display. Je vais donc pouvoir maintenant regarder comment cela fonctionne. MErci encore.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email