Afficher div selon option selected

Version imprimable

Bonjour,
je me lance ce matin dans une aventure obscure..
je cherche à supprimer/afficher des div selon qu'elles soient sélectionnées dans un menu déroulant
j'ai commencé à écrire un script qui ne fonctionne évidemment pas.

voici mon

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
          <div class="search">
             <form action="">
                <select name="metiers" id="metiers">
                 <option value="0" id="all_select" selected>Afficher tout</option>
                 <option value="1" id="select_1">Choix1</option>
                 <option value="2" id="select_2">Choix2</option>
                 <option value="3" id="select_3">Choix3</option>
                 <option value="4" id="select_4">Choix4</option>
                 <option value="5" id="select_5">Choix5</option>
                 <option value="6" id="select_6">Choix6</option>
                </select>
                <button>RECHERCHE</button>
             </form>
          </div>
 
             <div id="selected_1">
                 truc1
             </div>
             <div  id="selected_2">
                 truc2
             </div>
             <div id="selected_3">
                 truc3
             </div>
 
             <div id="selected_4">
                 truc4
             </div>
             <div id="selected_5">
                 truc5
             </div>
             <div id="selected_6">
                 truc6
             </div>

et mon script:

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
var membre1 = document.querySelector('#selected_1');
var membre2 = document.querySelector('#selected_2');
var membre3 = document.querySelector('#selected_3');
var membre4 = document.querySelector('#selected_4');
var membre5 = document.querySelector('#selected_5');
var membre6 = document.querySelector('#selected_6');
 
select.querySelector('#all_select').addEventListener('change', function(){  // afficher tout
    membre1.style.display = 'block';
	membre2.style.display = 'block';
	membre3.style.display = 'block';
	membre4.style.display = 'block';
	membre5.style.display = 'block';
	membre6.style.display = 'block';
});
 
select.querySelector('#select_1').addEventListener('change', function(){    //afficher membre1
    membre1.style.display = 'block';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_2').addEventListener('change', function(){    //afficher membre2
    membre1.style.display = 'none';
	membre2.style.display = 'block';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_3').addEventListener('change', function(){    //afficher membre3
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'block';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_4').addEventListener('change', function(){    //afficher membre4
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'block';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_5').addEventListener('change', function(){    //afficher membre5
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'block';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_6').addEventListener('change', function(){    //afficher membre6
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'block';
});

besoin d'aide...
merci :)

08/01/2018, 11h03
Watilin
Bonjour,
je dois poser la question évidente : as-tu ouvert la console F12 ? Si oui, as-tu un message d’erreur ?

Dans ton script, il y a une variable select qui n’est pas déclarée. Sans savoir où elle est déclarée, je ne peux pas t’aider ;)
(Note : envisage l’utilisation du mode strict si tu ne le fais pas déjà.)

Sinon, tu as peut-être aussi un problème de scénario : l’évènement change sur un <select> n’est émis que si deux conditions sont réunies :
1. il y a eu bel et bien un changement, autrement dit ça ne marche pas si je re-clique sur le même item ;
2. l’utilisateur ou l’utilisatrice a ensuite cliqué en dehors du <select> (ou appuyé sur tab pour déplacer le focus)

bonjour Watilin,

j'ai donc rajouté la variable select, mais ça ne change rien..:

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
// fonctionnalités recherche
var select = document.querySelector('select');
var membre1 = document.querySelector('#selected_1');
var membre2 = document.querySelector('#selected_2');
var membre3 = document.querySelector('#selected_3');
var membre4 = document.querySelector('#selected_4');
var membre5 = document.querySelector('#selected_5');
var membre6 = document.querySelector('#selected_6');
 
select.querySelector('#all_select').addEventListener('change', function(){  // afficher tout
    membre1.style.display = 'block';
	membre2.style.display = 'block';
	membre3.style.display = 'block';
	membre4.style.display = 'block';
	membre5.style.display = 'block';
	membre6.style.display = 'block';
});
 
select.querySelector('#select_1').addEventListener('change', function(){    //afficher membre1
    membre1.style.display = 'block';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_2').addEventListener('change', function(){    //afficher membre2
    membre1.style.display = 'none';
	membre2.style.display = 'block';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_3').addEventListener('change', function(){    //afficher membre3
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'block';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_4').addEventListener('change', function(){    //afficher membre4
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'block';
	membre5.style.display = 'none';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_5').addEventListener('change', function(){    //afficher membre5
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'block';
	membre6.style.display = 'none';
});
 
select.querySelector('#select_6').addEventListener('change', function(){    //afficher membre6
    membre1.style.display = 'none';
	membre2.style.display = 'none';
	membre3.style.display = 'none';
	membre4.style.display = 'none';
	membre5.style.display = 'none';
	membre6.style.display = 'block';
});

pour ce qui est du mode strict, j'avoue je ne connais pas
en réalité je débute avec javascript et j'ai un peu de mal...

08/01/2018, 12h42
NoSmoking

Bonjour,
il te faut mettre « ton écouteur » onchange sur le <select> et non sur les <option>.
08/01/2018, 12h53
Seds994

merci NoSmoking,
mais si on ne sélectionne pas selon l'option, comment il va reconnaître la div à afficher?

Citation:

mais si on ne sélectionne pas selon l'option,

j'ai du mal à voir ce que tu veux dire, néanmoins il te suffit d'une seule fonction dans laquelle tu affichera ou non les éléments sélectionnés.

Exemple de ce que cela pourrait donner comme fonction pour un affichage sélectif
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function affiche(id_element) { var oElems = document.querySelectorAll('[id^="selected_"'); var i; var nb = oElems.length; for (i = 0; i < nb; i += 1) { if (id_element === oElems[i].id) { oElems[i].style.display = 'block'; } else { oElems[i].style.display = 'none'; } } }
Ton code HTML devient dans ce cas
Code:

1 2 3 4 5 6 7 8 9 <select name="metiers" id="metiers" onchange = "affiche(this.value)"> <option value="" selected>Afficher tout</option> <option value="selected_1">Choix1</option> <option value="selected_2">Choix2</option> <option value="selected_3">Choix3</option> <option value="selected_4">Choix4</option> <option value="selected_5">Choix5</option> <option value="selected_6">Choix6</option> </select>
Il te reste à traiter l'affichage de tous les éléments.

08/01/2018, 20h55
Seds994

oui il est bien là le soucis maintenant: afficher chacune des id ça le fait avec cette boucle mais ça ne prend pas en compte le premier id, qui est afficher tout ça ne revient pas à 0.

Petite question : on peut faire ça avec des class aussi, ou var oElems = document.querySelectorAll('[id^="selected_"'); ne fonctionne qu'avec des id??
je dis ça j'ai essayé var oElems = document.querySelectorAll('[class^="selected_"'); et rien n'y fait.
09/01/2018, 15h40
PiXxz

Bonjour,

je suis désolé je ne viens pas apporter une solutions a ton problème mais seulement un soutient a ton sujet.
Effectivement je suis face au même problème que toi je possède un select et je souhaiterait qu'en fonction de l'option choisi, un tableau ou un autre s'affiche mais que les tableaux non concernés par l'option choisis dans le select restent cachés.
étant débutant en js j'aimerai bien que @NoSmoking tu puisse m'expliquer un peu le code que tu as proposé!

Merci, en espérant que qu'une solution soit trouvé!

@Seds994 :

Citation:

... mais ça ne prend pas en compte le premier id, qui est afficher tout ça ne revient pas à 0.

je t'avais prévenu qu'il te restait cela à traiter :D
Pour remettre à l'état initial, tous les éléments doivent être visibles donc, il suffit, en l’absence de valeur passée remettre à tous les éléments le display;block, cela peut se faire également dans la boucle.

Citation:

Petite question : on peut faire ça avec des class aussi, ou var oElems = document.querySelectorAll('[id^="selected_"'); ne fonctionne qu'avec des id??

pas sûr de comprendre le but de ta question.
Pour connaitre l'élément à afficher peu importe la sélection par ID ou par class, il suffit simplement de pouvoir faire la correspondance avec l"élément visé.

Citation:

je dis ça j'ai essayé var oElems = document.querySelectorAll('[class^="selected_"'); et rien n'y fait.

Il eut été intéressant que tu nous montres comment tu t'y es pris et quelle code HTML tu utilises pour cela.

Citation:

Envoyé par PiXxz

... j'aimerai bien que @NoSmoking tu puisse m'expliquer un peu le code que tu as proposé!

Attention ce qui suit s'applique au code HTML que j'ai fourni !
Il est important que la première <option> est une value vide

Code:

<option value="" selected>Afficher tout</option>

Je remet le code qui prend en compte le ré-affichage de tous éléments en le commentant
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 function affiche(id_element) { // récupération des éléments concernés var oElems = document.querySelectorAll('[id^="selected_"'); var i; var nb = oElems.length; for (i = 0; i < nb; i += 1) { // si une valeur a été passée en paramètre if (id_element) { // si l'ID correspond à l'ID de l"élément if (id_element === oElems[i].id) { // on affiche l'élément en mettant son display à "block" oElems[i].style.display = 'block'; } // dans le cas contraire on cache l'élément en mettant son display à "none" else { oElems[i].style.display = 'none'; } } // sinon pas de valeur passée en paramètre else { // on affiche l'élément en mettant son display à "block" oElems[i].style.display = 'block'; } } }
Le code pourrait être simplifié, voire tout autre en lisant chaque <option> par exemple, mais le principe est là.