Menu déroulant et affichage d'une image

**yuyu599** · 19/08/2018, 18h18

Bonjour le forum,
Alors je souhaite afficher un menu déroulant avec plusieurs options.
En fonction de la sélection faites je voudrais qu'une image soit affichée.
Exemple je clique sur ma liste, je prends l'option 2 et dès que je sélectionne l'option 2 une image correspondante à cette option s'affiche à un endroit voulu.

Cela est-il possible à faire ? Si oui par ou commencer s'il vous plait ?

Un immense merci par avance !

Invité · 19/08/2018, 18h26

Bonjour,

commence déjà par montrer le code HTML de ton "menu déroulant"...

...qui me fait plutôt penser à une "liste déroulante" <select><option>... (oui ? non ?).

**yuyu599** · 19/08/2018, 18h27

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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
      <head>
        <title>Ceci est le titre de la page</title>
        <script type="text/javascript">
          function catsel(sel) {
            //if (sel.value=="-1" ) return;
            var opt=sel.getElementsByTagName("option" );
            for (var i=0; i<opt.length; i++) {
              var x=document.getElementById(opt[i].value);
              if (x) x.style.display="none";
            }
            var cat = document.getElementById(sel.value);
            if (cat) cat.style.display="block";
          }
        </script>
      </head> 
      <body>
        <table>
          <tr>
            <td>
            Faites un choix :
            </td>
            <td>
              <select onchange="catsel(this)">
              <!--<option value="-1">None</option>!-->
                <option value="1">Choix 1</option>
                <option value="2">Choix 2</option>
                <option value="3">Choix 3</option>
                <option value="4">Choix 4</option>
                <option value="5">Choix 5</option>
                <option value="6">Choix 6</option>
                <option value="7">Choix 7</option>
                <option value="8">Choix 8</option>
              </select>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div id="1" style="display:block">
              <img src="43.jpg" width="300" height="594"></div>
              <div id="2" style="display:none">
                <img src="44.jpg" width="300" height="594">
              </div>
              <div id="3" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 3</td></tr></table>
              </div>
              <div id="4" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 4</td></tr></table>
              </div>
              <div id="5" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 5</td></tr></table>
              </div>
              <div id="6" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 6</td></tr></table>
              </div>
              <div id="7" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 7</td></tr></table>
              </div>
              <div id="8" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 8</td></tr></table>
              </div>
            </td>
          </tr>
        </table>
      </body>
    </html>

J'ai mis que 2 images mais le principe semble fonctionner je viens de trouver une solution.

Par contre cela m'amène à la deuxième étape, j'ai une deuxième liste allant de 1 à 5.
Je voudrais lier les deux, c'est à dire que :
Si la personne fait le choix 2 dans la liste 1 et le choix 3 dans la liste 2, alors il m'affiche le texte 2-3.txt
Si la personne fait le choix 15 dans la liste 1 et le choix 2 dans la liste 2, alors il m'affiche le texte 15-2.txt
Si la personne fait le choix 10 dans la liste 1 et le choix 1 dans la liste 2, alors il m'affiche le texte 10-1.txt

etc.
Je sais pas si c'est clair oO

Invité · 19/08/2018, 18h58

1-

"listes liées SANS Ajax"

Créer des listes déroulantes liées entre elles sans utiliser Ajax

2- J'avais écrit un petit script dans cette discussion...
.. que je recopie ici :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<select id="idliste1" name="liste1" onchange="addOptions(this.selectedIndex, 'idliste2');">
	<option value="0">-- Choisissez un liste1 ---</option>
	<option value="1">blabla1</option>
	<option value="2">blabla2</option>
	<option value="3">blabla3</option>
</select>
 
<select id="idliste2" name="liste2">
	<option value="0">-- Choisissez un liste2 ---</option>
</select>

Code JavaScript :

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
function addOptions(isel, id2)
{
	// isel : valeur de l option sélectionnée de la liste 1 
 
	// 1/ CREATION des options
	// Syntaxe : new Option("Text","Value", "defaultSelected true / false", "selected true / false");
	switch (isel) 
	{  
		// on peut construire ces array avec PHP
		case 1 : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false),
				new Option('machin11', '11', false, false),
				new Option('machin12', '12', false, false),
				new Option('machin13', '13', false, false)
			];
			break; 
		case 2 : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false),
				new Option('machin21', '21', false, false),
				new Option('machin22', '22', false, false),
				new Option('machin23', '23', false, false),
				new Option('machin24', '24', false, false),
				new Option('machin25', '25', false, false),
				new Option('machin26', '26', false, false)
			];
			break; 
		case 3 : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false),
				new Option('machin31', '31', false, false),
				new Option('machin32', '32', false, false),
				new Option('machin33', '33', false, false),
				new Option('machin34', '34', false, false)
			];
			break; 
		// ... (et ainsi de suite...)
		default : 
			var opt = [
				new Option('-- Choisissez un liste2 ---', '0', false, false)
			];
	}
	// 2/ AJOUT des options
	var List2 = document.getElementById(id2); //id2 : id de la liste à laquelle ajouter les options
	var i, n;
	n = opt.length;
		List2.innerHTML = ''; // on vide les options
	for (i=0; i<n; i++)
	{
		List2.options.add(opt[i]); // on ajoute les options
	}
}

3- A adapter ensuite.

**yuyu599** · 19/08/2018, 19h04

Bonjour,

Merci beaucoup je vais essayé cela plus tard et je vous tiens au courant :-)

Immense merci :-)

**yuyu599** · 19/08/2018, 19h36

Bonjour,
Je viens de tester, votre script fonctionne très bien mais ce n'est pas exactement ce que je souhaite faire.

Voila l'idée.
J'ai une première liste "liste1" avec 22 éléments.
Je sélectionne 1 éléments parmi les 22, une fois sélectionné une image s'affiche correspondant à la sélection ( 1 image pour chaque choix )
A coté de ma première liste, j'ai une deuxième liste "liste2" avec 5 options, toujours les mêmes et indépendante de ma liste 1, peu importe le choix de ma liste1, les choix sur ma liste2 seront les mêmes.
Une fois mon choix fait dans la deuxième liste, un texte s'affiche en fonction cette fois du choix de la liste1 et de la liste2, donc texte = liste1liste2.

Je sais pas si j'ai été clair :-)
Après plusieurs tests j'arrive à ce 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
          function catsel(sel) {
            //if (sel.value=="-1" ) return;
            var opt=sel.getElementsByTagName("option" );
            for (var i=0; i<opt.length; i++) {
              var x=document.getElementById(opt[i].value);
              if (x) x.style.display="none";
            }
            var cat = document.getElementById(sel.value);
            if (cat) cat.style.display="block";
          }
        </script>
<script type="text/javascript">
 
function addOptions(isel, id2)
{
        // isel : valeur de l option sélectionnée de la liste 1 
 
        // 1/ CREATION des options
        // Syntaxe : new Option("Text","Value", "defaultSelected true / false", "selected true / false");
        switch (isel) 
        {  
                // on peut construire ces array avec PHP
                case 1 : 
                        var opt = [
                                new Option('-- Choisissez un liste2 ---', '0', false, false),
                                new Option('machin11', '11', false, false),
                                new Option('machin12', '12', false, false),
                                new Option('machin13', '13', false, false)
                        ];
                        break; 
                case 2 : 
                        var opt = [
                                new Option('-- Choisissez un liste2 ---', '0', false, false),
                                new Option('machin21', '21', false, false),
                                new Option('machin22', '22', false, false),
                                new Option('machin23', '23', false, false),
                                new Option('machin24', '24', false, false),
                                new Option('machin25', '25', false, false),
                                new Option('machin26', '26', false, false)
                        ];
                        break; 
                case 3 : 
                        var opt = [
                                new Option('-- Choisissez un liste2 ---', '0', false, false),
                                new Option('machin31', '31', false, false),
                                new Option('machin32', '32', false, false),
                                new Option('machin33', '33', false, false),
                                new Option('machin34', '34', false, false)
                        ];
                        break; 
                // ... (et ainsi de suite...)
                default : 
                        var opt = [
                                new Option('-- Choisissez un liste2 ---', '0', false, false)
                        ];
        }
        // 2/ AJOUT des options
        var List2 = document.getElementById(id2); //id2 : id de la liste à laquelle ajouter les options
        var i, n;
        n = opt.length;
                List2.innerHTML = ''; // on vide les options
        for (i=0; i<n; i++)
        {
                List2.options.add(opt[i]); // on ajoute les options
        }
}// JavaScript Document
</script>
<title>Untitled Document</title>
</head>
 
<body>
 <table>
          <tr>
            <td>
            Faites un choix :
            </td>
            <td>
<select id="idliste1" name="liste1" onchange="addOptions(this.selectedIndex, 'idliste2'),catsel(this);">
	<option value="0">-- Choisissez un liste1 ---</option>
	<option value="1">blabla1</option>
	<option value="2">blabla2</option>
	<option value="3">blabla3</option>
</select>
 
<select id="idliste2" name="liste2">
	<option value="0">-- Choisissez un liste2 ---</option>
</select>
 </td>
          </tr>
          <tr>
            <td colspan="2">
              <div id="1" style="display:block">
              <img src="43.jpg" width="300" height="594"></div>
              <div id="2" style="display:none">
                <img src="44.jpg" width="300" height="594">
              </div>
              <div id="3" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 3</td></tr></table>
              </div>
              <div id="4" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 4</td></tr></table>
              </div>
              <div id="5" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 5</td></tr></table>
              </div>
              <div id="6" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 6</td></tr></table>
              </div>
              <div id="7" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 7</td></tr></table>
              </div>
              <div id="8" style="display:none">
                <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 8</td></tr></table>
              </div>
            </td>
          </tr>
        </table>
      </body>
    </html>

Il me manque la dernière phase, après avoir fait le deuxième choix, afficher le texte correspondant soit liste1liste2.

Menu déroulant et affichage d'une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager