Choix dans une liste déroulante qui affiche la div correspondante

**Mr Quinou** · 10/11/2014, 17h33

Bonjour,

Je pense que ce n'ai pas grand chose mais le code suivant ne fonctionne pas et je ne sais pas pourquoi, s'il vous plait pouvez vous m'aider.

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
<html><head>
     <script type="text/javascript">
 
     function modification(objet)
     {   
     I = objet.selectedIndex ;
     choix = objet.options[I].value ;   
     array = document.getElementsByClass("point") ;
 
     for ( I=0; I<objet.options.length; I++)
          {
          if ( objet.options[I].value == choix )
               array[I].style.display = "block";
          else
               array[I].style.display = "none";
          }  
     }
 
     </script>
</head><body>
     <label style="font: 16px verdana;">OPTION : </label>
	 <select onchange="modification(this)">
 
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
 
     </select>
 
	<div></div>
	<div></div> 
     <div class="point" style="display: none;"><h1 style="color: red;">Je suis la div n° 1</h1></div>											
     <div class="point" style="display: none;"><h1 style="color: blue;">Je suis la div n° 2</h1></div>
     <div class="point" style="display: none;"><h1 style="color: green;">Je suis la div n° 3</h1></div> 
     <div class="point" style="display: none;"><h1 style="color: green;">Je suis la div n° 4</h1></div>
	 <div class="point" style="display: none;"><h1 style="color: green;">Je suis la div n° 5</h1></div>
 
 
</body></html>

**NoSmoking** · 10/11/2014, 17h42

Bonjour,
et tu l'a récupéré où cette méthode?

Code :

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

array = document.getElementsByClass("point") ;

ne s'agirait-il pas plutôt de

Code :

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

array = document.getElementsByClassName("point");

J'en profites pour t'inciter à lire Pourquoi faut-il toujours déclarer ses variables ?

**Mr Quinou** · 10/11/2014, 19h48

Heum je ne vais pas balancer mais c'est sur un site qui commence par openclass... et c'est une personne qui m'as aidé sur ce site...

Un grand merci à toi vénérable NoSmoking évidement que ta solution fonctionne sa à même du te faire sourire

En tout cas merci encore sa me rend vraiment service

**NoSmoking** · 11/11/2014, 09h20

Globalement tu pourrais avoir un code encore un peu plus actuel

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function modification(objet) {
  var choix = objet.value,                          // accès direct à la valeur du SELECT
      array = document.querySelectorAll('.point');  // récup. des éléments ayant une classe 'point'
 
  for (var i = 0, nb = objet.options.length; i <nb; i++) {
    if (objet.options[i].value == choix){
      array[i].style.display = "block";
    }
    else{
      array[i].style.display = "none";
    }
  }
}

encore simplifiable mais bon....

Choix dans une liste déroulante qui affiche la div correspondante

JavaScript

Vue hybride

Discussions similaires

Partager

Partager