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.

Invité · 19/08/2018, 20h07

Envoyé par yuyu599

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

Dans ce cas, ce ne sont pas des listes liées !
(du coup, tu peux oublier mon script...)

Si les deux listes sont indépendantes, alors il suffit de récupérer les 2 choix !
Tu sais le faire pour une, tu sauras le faire avec 2, non ?

N.B. On ne va pas TOUT t'écrire non plus...

**yuyu599** · 19/08/2018, 20h29

Merci de votre réponse :-)
Ce sont des scripts que j'ai récupéré sur Internet car je ne sais pas coder en javascript ^^
Donc je reprend mon script initiale sans utiliser le votre.

Je dois créer une nouvelle fonction javascript similaire à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<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>

Une fonction qui récupére cette fois la valeur des 2 listes ?

Invité · 19/08/2018, 20h39

Oublie ton vieux code... Il date de Mathusalem...

Voilà un code complet, fonctionnel, et plus "moderne" :

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title></title>
 
<script>
function catsel(sel_id1,sel_id2) 
{
        // on récupère les 2 choix
        var sel_1_val = document.getElementById( sel_id1 ).value;
        var sel_2_val = document.getElementById( sel_id2 ).value;
 
        // on masque tous les div de class="cat"
        cat_hide_all();
 
        // si les 2 choix sont faits
        if( sel_1_val !='' && sel_2_val !='' )
        {
                // on affiche le bon div
                var cat_to_show_id = 'cat-' + sel_1_val + '-' + sel_2_val; // de la forme : cat-2-C
                var cat_to_show = document.getElementById( cat_to_show_id );
                if (cat_to_show) cat_to_show.style.display = 'block';
        }
}
// masquer tous les div
function cat_hide_all() 
{
        var divs = document.querySelectorAll( '.cat' );
        divs.forEach(function(div) {
                div.style.display = 'none';
        });
}
// ONLOAD : on masque tous les div de class="cat"
window.onload = cat_hide_all;
</script>
 
<style type="text/css">
.cat { 
        border:1px dashed #ccc; padding:20px; margin-top:20px; 
        display:none; /* on masque au départ */
}
</style>
</head>
<body>
 
<select id="select_id1" onchange="catsel('select_id1', 'select_id2');">
	<option value="">...choisissez...</option>
	<option value="1">Choix 1</option>
	<option value="2">Choix 2</option>
	<option value="3">Choix 3</option>
 
</select>
<select id="select_id2" onchange="catsel('select_id1', 'select_id2');">
	<option value="">...choisissez...</option>
	<option value="A">Choix A</option>
	<option value="B">Choix B</option>
	<option value="C">Choix C</option>
	<option value="D">Choix D</option>
	<option value="E">Choix E</option>
</select>
 
<div>
	<div class="cat" id="cat-1-A">Texte cat1-A</div>
	<div class="cat" id="cat-1-B">Texte cat1-B</div>
	<div class="cat" id="cat-1-C">Texte cat1-C</div>
	<div class="cat" id="cat-1-D">Texte cat1-D</div>
	<div class="cat" id="cat-1-E">Texte cat1-E</div>
 
	<div class="cat" id="cat-2-A">Texte cat2-A</div>
	<div class="cat" id="cat-2-B">Texte cat2-B</div>
	<div class="cat" id="cat-2-C">Texte cat2-C</div>
	<div class="cat" id="cat-2-D">Texte cat2-D</div>
	<div class="cat" id="cat-2-E">Texte cat2-E</div>
 
	<div class="cat" id="cat-3-A">Texte cat3-A</div>
	<div class="cat" id="cat-3-B">Texte cat3-B</div>
	<div class="cat" id="cat-3-C">Texte cat3-C</div>
	<div class="cat" id="cat-3-D">Texte cat3-D</div>
	<div class="cat" id="cat-3-E">Texte cat3-E</div>
</div>
 
</body>
</html>

Évidemment, on peut encore optimiser. (on peut n'avoir qu'un seul <div>, et insérer les textes vis un array JavaScript)
Mais... La suite au prochain numéro...............

**yuyu599** · 20/08/2018, 03h27

Bonjour,
Wouah grand merci pour le nettoyage du code !
Je vais le tester demain sans faute et je vous tiens au courant !!
Merci beaucoup !

**yuyu599** · 21/08/2018, 04h22

Bonjour,
Je viens de tester et effectivement le code est très propre, rien à dire un immense merci !

Il me manque juste à coder la partie 1 en faite, quand je fais un choix dans la première liste, une image apparait ( 1 image spécifique par rapport à mon choix).

Dois-je utiliser le code que j'avais avant et essayer de l'insérer ou dois-je repartir sur une base différente car trop vieux ?
J'avais ceci pour afficher l'image :

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

Merci de votre retour :-)

PS : j'ai un premier jet de code que j'ai bidouillé et j'arrive à cela :

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>
<html>
<head>
    <meta charset="utf-8" />
	<title></title>
      <script type="text/javascript">
          function catsel2(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>
function catsel(sel_id1,sel_id2) 
{
        // on récupère les 2 choix
        var sel_1_val = document.getElementById( sel_id1 ).value;
        var sel_2_val = document.getElementById( sel_id2 ).value;
 
        // on masque tous les div de class="cat"
        cat_hide_all();
 
        // si les 2 choix sont faits
        if( sel_1_val !='' && sel_2_val !='' )
        {
                // on affiche le bon div
                var cat_to_show_id = 'cat-' + sel_1_val + '-' + sel_2_val; // de la forme : cat-2-C
                var cat_to_show = document.getElementById( cat_to_show_id );
                if (cat_to_show) cat_to_show.style.display = 'block';
        }
}
// masquer tous les div
function cat_hide_all() 
{
        var divs = document.querySelectorAll( '.cat' );
        divs.forEach(function(div) {
                div.style.display = 'none';
        });
}
// ONLOAD : on masque tous les div de class="cat"
window.onload = cat_hide_all;
</script>
 
<style type="text/css">
.cat { 
        border:1px dashed #ccc; padding:20px; margin-top:20px; 
        display:none; /* on masque au départ */
}
</style>
</head>
<body>
 
<select id="select_id1" onchange="catsel('select_id1', 'select_id2'),catsel2(this);">
	<option value="">...choisissez...</option>
	<option value="1">Choix 1</option>
	<option value="2">Choix 2</option>
	<option value="3">Choix 3</option>
 
</select>
 
 <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>
<select id="select_id2" onchange="catsel('select_id1', 'select_id2');">
	<option value="">...choisissez...</option>
	<option value="A">Choix A</option>
	<option value="B">Choix B</option>
	<option value="C">Choix C</option>
	<option value="D">Choix D</option>
	<option value="E">Choix E</option>
</select>
 
<div>
	<div class="cat" id="cat-1-A">Texte cat1-A</div>
	<div class="cat" id="cat-1-B">Texte cat1-B</div>
	<div class="cat" id="cat-1-C">Texte cat1-C</div>
	<div class="cat" id="cat-1-D">Texte cat1-D</div>
	<div class="cat" id="cat-1-E">Texte cat1-E</div>
 
	<div class="cat" id="cat-2-A">Texte cat2-A</div>
	<div class="cat" id="cat-2-B">Texte cat2-B</div>
	<div class="cat" id="cat-2-C">Texte cat2-C</div>
	<div class="cat" id="cat-2-D">Texte cat2-D</div>
	<div class="cat" id="cat-2-E">Texte cat2-E</div>
 
	<div class="cat" id="cat-3-A">Texte cat3-A</div>
	<div class="cat" id="cat-3-B">Texte cat3-B</div>
	<div class="cat" id="cat-3-C">Texte cat3-C</div>
	<div class="cat" id="cat-3-D">Texte cat3-D</div>
	<div class="cat" id="cat-3-E">Texte cat3-E</div>
</div>
 
</body>
</html>

Invité · 21/08/2018, 10h16

Bonjour,

Tout peut se faire dans ma fonction.

Ta "bidouille" prouve que tu n'as rien compris au code (ni à l'ancien, ni au mien).
Pourtant, j'y ai mis des explications à chaque ligne...

Indice : le principe est le même.

Code :

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

1
2
3
4
       // si le 1er choix est fait
        if( sel_1_val !=''  )
        {
 ...

Envoyé par yuyu599

...Ce sont des scripts que j'ai récupéré sur Internet car je ne sais pas coder en javascript ^^

Il serait temps d'apprendre les bases.

Menu déroulant et affichage d'une image

JavaScript

Discussions similaires

Partager

Partager