Discussion :

[Seds994]

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]

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)

[Seds994]

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]

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

[Seds994]

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

[NoSmoking]

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.