Critère, sélection pour affichage

**sebmath** · 10/10/2013, 18h26

Bonjour à vous.

J'expose mon petit problème, en espérant être dans la bonne section.

Voila je souhaite faire en html une sorte de sélection de critère avec 2 critères et un bouton qui va chercher une image à afficher depuis un dossier le tout sans BDD.

Pour arborescence du dossier.

Carto\ (dossier source)
Carto\page\ (dossier contenant les pages html)
Carto\images\ (dossier contenant les dossiers images)
Carto\images\autres\ (dossier contenant des images autres "backgrounde etc")
Carto\images\detaille\ (dossier des images détaillé allant de 1.jpg à xxx.jpg)
Carto\images\general\ (dossier des images general allant de 1.jpg à xxx.jpg)

Code actuel:

Code :

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
 
<html>
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Speed Cartographie</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
 
	<body>
		<form name="formulaire">
			<div align="center">
 
				<!-- Boite de dialogue 1 pour les echanges --> 
				<select name="boite1" size="10" multiple="multiple">
					<option selected>....::Choisissez un échange::....</option>
					<option>Echange 1</option>
					<option>Echange 2</option>
					<option>Echange 3</option>
					<option>Echange 4</option>
					<option>Echange 5</option>
					<option>Echange 6</option>
					<option>Echange 7</option>
					<option>Echange 8</option>
					<option>Echange 9</option>
					<option>Echange 10</option>
				</select>
 
				<!-- Boite de dialogue 2 pour Général ou détaillé --> 
				<select name="boite2" size="10" multiple="multiple">
					<option selected>....::Choisissez une cartographie::....</option>
					<option>Général</option>
					<option>Détaillé</option>
				</select>
 
				<br/><br/><br/><br/>
 
				<!-- Cadre affichant l'image selectionné avec les critaires 1 & 2 --> 
				<table name="image" border="2" height="50%" width="50%">
					<div align="center">
						<td> Image Carto </td>
					</div>
				</table>
 
			</div>
		</form>
	</body>
</html>

Voila donc pour moi le but est de sélectionner 2 critères le 1er dans le "boite1" et le 2eme dans la "boite2", Si "6 et détaillé" sont sélectionné alors avec un bouton sa affiche dans le cadre central l'image "6.jpg" du dossier "Carto\images\detaille\" idem si je sélectionne "500 et général" l'image 500.jpg du dossier "Carto\images\general\" sera affiché dans le cadre central.

Je suppose que ces fonctions seront crée directement dans le bouton mais c'est la ou je sèche car j'ai essayé pas mal de chose et impossible de trouver.

Donc je suis à la recherche d'une idée (je ne cherche pas LA solution mais des idées qui me permettrais de m'orienter dans le bon sens et de réussir à le faire) le tout sans BDD.

Cdt.

**NoSmoking** · 11/10/2013, 10h16

Bonjour,
tout d'abord il te faut mettre des value à tes OPTIONs

Code html :

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

1
2
3
<option value="1">Echange 1</option>
<!-- -->
<option value="general">Général</option>

Lorsque tu cliques sur le bouton tu fais une lecture de la value de tes différents SELECTs et tu concatènes le tout pour avoir l'image à afficher.

**sebmath** · 25/10/2013, 15h37

Bonjour,

Code html :

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

<button onclick="ClicBouton();">Valider !</button>

Code :

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
function hideDiv() {
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById('hideshow').style.visibility = 'hidden';
	}
	else {
		if (document.layers) { // Netscape 4
			document.hideshow.visibility = 'hidden';
		}
		else { // IE 4
			document.all.hideshow.style.visibility = 'hidden';
		}
	}
}
function showDiv() {
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById('hideshow').style.visibility = 'visible';
	}
	else {
		if (document.layers) { // Netscape 4
			document.hideshow.visibility = 'visible';
		}
		else { // IE 4
			document.all.hideshow.style.visibility = 'visible';
		}
	}
}

J'ai ajouté ceci pour le bouton et on peux voir que le bouton a bien sélectionné les div mais je n'arrive pas a faire en sorte qu'il cherche dans le dossier les images associées (carto-beta1.html?boite1=4&boite2=detaille).

Code final

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
<html>
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Speed Cartographie</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
 
	<body>
		<form name="formulaire">
			<div align="center">
 
				<!-- Boite de dialogue 1 pour les echanges --> 
				<select name="boite1" size="10" multiple="multiple">
					<option selected>....::Choisissez un échange::....</option>
					<option value="1">Echange 1</option>
					<option value="2">Echange 2</option>
					<option value="3">Echange 3</option>
					<option value="4">Echange 4</option>
					<option value="5">Echange 5</option>
					<option value="6">Echange 6</option>
					<option value="7">Echange 7</option>
					<option value="8">Echange 8</option>
					<option value="9">Echange 9</option>
					<option value="10">Echange 10</option>
				</select>
 
				<!-- Boite de dialogue 2 pour Général ou détaillé --> 
				<select name="boite2" size="10" multiple="multiple">
					<option selected>....::Choisissez une cartographie::....</option>
					<option value="general">Général</option>
					<option value="detaille">Détaillé</option>
				</select>
 
				<br/><br/>
 
				<!-- Boutton pour valider les critères et afficher l'image dans le cadre--> 
				<button onclick="ClicBouton();">Valider !</button>
					<script type="text/javascript">
                                                function hideDiv() {
                                                if (document.getElementById) { // DOM3 = IE5, NS6
                                                document.getElementById('hideshow').style.visibility = 'hidden';
                                                }
                                                else {
                                                if (document.layers) { // Netscape 4
                                                document.hideshow.visibility = 'hidden';
                                                }
                                                else { // IE 4
                                                document.all.hideshow.style.visibility = 'hidden';
                                                }
                                                }
                                                }
                                                function showDiv() {
                                                if (document.getElementById) { // DOM3 = IE5, NS6
                                                document.getElementById('hideshow').style.visibility = 'visible';
                                                }
                                                else {
                                                if (document.layers) { // Netscape 4
                                                document.hideshow.visibility = 'visible';
                                                }
                                                else { // IE 4
                                                document.all.hideshow.style.visibility = 'visible';
                                                }
                                                }
                                                } 
                                        </script> 
 
				<!-- Cadre affichant l'image selectionné avec les critaires 1 & 2 --> 
				<table name="image" border="2" height="50%" width="50%">
					<div align="center">
						<td> Image Carto </td>
					</div>
				</table>
 
			</div>
		</form>
	</body>
</html>

Si j'ai bien compris je doit faire cette phrase en javascript.

SI value="1" est sélectionné et SI value="general" est sélectionné ALORS afficher dans name="image" l'image 1.jpg du dossier Carto\images\general.

Et ce pour chaque possibilité de sélection.

**Bovino** · 25/10/2013, 16h05

Code :

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

1
2
3
4
5
6
7
8
else {
	if (document.layers) { // Netscape 4
		document.hideshow.visibility = 'hidden';
	}
	else { // IE 4
		document.all.hideshow.style.visibility = 'hidden';
	}
}

Tu as beaucoup de visiteurs qui utilisent Netscape 4 ou IE 4 ?

Et pourquoi tu as deux balises <html> ?

**sebmath** · 25/10/2013, 16h18

J'ai retiré la balise <html> en trop sinon pur Netscape 4 et IE 4 je me suis dit au cas ou

.

Par contre j'ai trouvé ceci en cherchant un peut et sa semble plus adapté que le gros paté du dessus que j'ai fait:

Code :

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
 
function getSelectValue(selectId)
{
	var elmt = document.getElementById(selectId);
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	var values = new Array();
	for(var i=0; i< elmt.options.length; i++)
	{
		if(elmt.options[i].selected == true)
		{
			values[values.length] = elmt.options[i].value; 
		}
	}	
	return values;	
}

Source

Et si j'ai bien compris je doit retranscrire cette phrase en javascript.

SI id="echange" et value="1" sont sélectionnés et SI id="carto" et value="general" sont sélectionné ALORS afficher dans id="img" et name="image" l'image 00001.jpg du dossier Carto\images\general.

Et ce pour chaque possibilité de sélection.

**NoSmoking** · 25/10/2013, 17h06

pas nécessaire d'aller chercher loin se que l'on a sous la main

http://javascript.developpez.com/faq...age=formChamps

SI id="echange" et value="1" sont sélectionnés et SI id="carto" et value="general" sont sélectionné ALORS afficher dans id="img" et name="image" l'image 00001.jpg du dossier Carto\images\general.

c'est exactement ce que je t'ais mis il y a peu, une concaténation des différentes valeurs!

Critère, sélection pour affichage

JavaScript

Vue hybride

Discussions similaires

Partager

Partager