Afficher div selon option selected

**Seds994** · 08/01/2018, 10h49

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

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

**Watilin** · 08/01/2018, 11h03

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 :

il y a eu bel et bien un changement, autrement dit ça ne marche pas si je re-clique sur le même item ;
l’utilisateur ou l’utilisatrice a ensuite cliqué en dehors du <select> (ou appuyé sur tab pour déplacer le focus)

**Seds994** · 08/01/2018, 12h38

bonjour Watilin,

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

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

**NoSmoking** · 08/01/2018, 12h42

Bonjour,
il te faut mettre « ton écouteur » onchange sur le <select> et non sur les <option>.

**Seds994** · 08/01/2018, 12h53

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

**NoSmoking** · 08/01/2018, 15h57

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 :

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

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

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

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.

**Seds994** · 08/01/2018, 20h55

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.

**PiXxz** · 09/01/2018, 15h40

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

**NoSmoking** · 09/01/2018, 16h25

@Seds994 :

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

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.

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

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.

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

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

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

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

Afficher div selon option selected

JavaScript

Discussions similaires

Partager

Partager