IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Janvier 2014
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2014
    Messages : 4
    Points : 3
    Points
    3
    Par défaut Choix dans une liste déroulante qui affiche la div correspondante
    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>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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 ?

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Janvier 2014
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2014
    Messages : 4
    Points : 3
    Points
    3
    Par défaut
    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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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....

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 16
    Dernier message: 06/03/2015, 01h14
  2. Réponses: 2
    Dernier message: 22/02/2012, 02h03
  3. Réponses: 5
    Dernier message: 31/03/2010, 14h20
  4. Réponses: 0
    Dernier message: 09/09/2008, 22h53
  5. [FORMULAIRE] affichage selon le choix dans une liste déroulante.
    Par gailup dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 25/06/2006, 15h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo