Critère, sélection pour affichage

Version imprimable

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:

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">  <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>  <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/>  <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.

11/10/2013, 10h16
NoSmoking
Bonjour,
tout d'abord il te faut mettre des value à tes OPTIONs
Code:

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.

Bonjour,

Code:

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

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

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.

Code:

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'; } }
:no:

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

Et pourquoi tu as deux balises <html> ? :cry:

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

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:

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.

25/10/2013, 17h06
NoSmoking

pas nécessaire d'aller chercher loin se que l'on a sous la main
:faq:http://javascript.developpez.com/faq...age=formChamps

Citation:

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!

Bonjour,

Voila je pense avoir trouvé :

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
<!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 id="Echange" 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 id="Carto" 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 language="javascript" type="text/javascript">
function NomConcat (Boite1,Boite2,Image)
{
// Pour retourner systématiquement la valeur concaténée ou volontairement modifiée par une saisie dans image
if (ChampImage.value.length != 0) 
    {
        Image.value = (Image.value)
        return Image.value      
        }
 
else 
 
// Si des valeurs sont présentes dans les deux champs boite1 et boite2, concaténation dans image
if (Boite1.value.length != 0 && Boite2.value.length != 0 && Image.value.length == 0) 
    {
        Image.value = (Boite1.value + " " + Boite2.value)
        return Image.value
        }
 
// Dans tous les cas reprendre la valeur présente ou involontairement effacée dans image
// concaténation obligatoire si les boite1 et boite2 sont utilisé
        return Image.value      
                                        </script> 
 
				<!-- Cadre affichant l'image selectionné avec les critaires 1 & 2 --> 
				<table id="Img" name="Image" border="2" height="50%" width="50%">
					<div align="center">
						<td> Image Carto </td>
					</div>
				</table>
 
			</div>
		</form>
	</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function NomConcat (Boite1,Boite2,Image)
{
 
if (ChampImage.value.length != 0) 
{
Image.value = (Image.value)
return Image.value	
}
 
else 
 
if (Boite1.value.length != 0 && Boite2.value.length != 0 && Image.value.length == 0) 
{
Image.value = (Boite1.value + " " + Boite2.value)
return Image.value
}
 
return Image.value

Par contre afficher les images de tel ou tel dossier en fonction du choix je sèche.

Citation:

Voila je pense avoir trouvé :

on ne voit pas la fonction ClicBouton et où est appelée ta fonction NomConcat ?

Voici un petit exemple pour t'aider à visualiser une façon de faire avec des SELECTs simples, ce qui me semble suffisant pour ce que tu veux faire.

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
.red{ color:red; margin:0;}
.ok { color:green;}
</style>
<script>
function getChoix(){
  // initialisation diverses et avariées
  var oSelect_1 = document.getElementById('select_1'),
      oSelect_2 = document.getElementById('select_2'),
      oErreur   = document.getElementById('erreur'),
      result = [],  // tableau des résultats
      erreur = '';  // chaine contenant les erreurs
  // efface contenu erreur
  oErreur.innerHTML = '';
  // test valeur du select 1
  if( oSelect_1.value == ''){
    erreur += '<p class="red">SELECT_1 : Pas de valeur sélectionnée<\/p>';
  }
  else{
    result.push( oSelect_1.value);
  }
  // test valeur du select 2
  if( oSelect_2.value == ''){
    erreur += '<p class="red">SELECT_2 : Pas de valeur sélectionnée<\/p>';
  }
  else{
    result.push( oSelect_2.value);
  }
  // affichage erreur si existe
  if( erreur.length){
    oErreur.innerHTML = erreur;
  }
  else{
    oErreur.innerHTML = '<p class="ok">' +result.join('\\') +'<\/p>';
  }
}
</script>
</head>
<body>
<select id="select_1">
  <option value="">Faites votre choix</option>
  <option value="Bleu">Bleu</option>
  <option value="Rouge">Rouge</option>
  <option value="Vert">Vert</option>
</select>
<select id="select_2">
  <option value="">Faites votre choix</option>
  <option value="Un">Un</option>
  <option value="Deux">Deux</option>
  <option value="Trois">Trois</option>
</select>
<button onclick="getChoix();">Sélection</button>
<div id="erreur"></div>
</body>
</html>