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 :

Image dans la liste déroulante


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Juillet 2004
    Messages
    45
    Détails du profil
    Informations forums :
    Inscription : Juillet 2004
    Messages : 45
    Par défaut Image dans la liste déroulante
    Bonjour,

    Je travaille actuellement les images dans la liste déroulante pour les absences des élèves (matin ou après-midi ou journée).

    Lorsqu'il y a une seule liste déroulante, l'image sélectionnée apparaît sans problème.

    Mais lorsqu'il y a plusieurs listes déroulantes (pour une raison des jours dans le mois), je vous montre le lien suivant : http://www.irpa-epdsae.fr/die_calend...egende_bis.php les images sélectionnées n'apparaissent pas.

    J'ai mis en évidence des lignes en couleur :
    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
    72
    73
    74
    75
    76
    77
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans titre</title>
    <link href="test.css" rel="stylesheet" type="text/css">
    
    <script language="javascript">
    function change() {
     
       select = document.getElementById("select");
       select_s = select.style;
     
       switch(select.selectedIndex) {
    
          case 0 :
             select_s.background = "url('images/icone_presence_journee_v2.png') no-repeat";
             break;
    
          case 1 :
             select_s.background = "url('images/icone_absence_matin_v2.png') no-repeat";
             break;
     
       case 2 :
          select_s.background = "url('images/icone_absence_apresmidi_v2.png') no-repeat";
          break;
     
       case 3 :
          select_s.background = "url('images/icone_absence_journee_v2.png') no-repeat";
          break;
     
       default:
          select_s.background = "none";
          break;
       }
    }
    </script>
    </head>
    <body>
    <?php 
    if (isset($_POST['maj']))
     {
      echo "Processus n°1 <br />";
      $compteur=1;
      while ($compteur<=5)
       {
        $valeur_recuperee="absence" . $compteur;
    	$absence_recuperee=$_POST[$valeur_recuperee];
    	echo $absence_recuperee;
    	$compteur++;
       }
     }
    
    $compteur=1; ?>
    
    <form id="form1" name="form1" method="post" action=""><?php 
     while($compteur<=5)
      { 
       $tableau="absence" . $compteur; ?>
       <select id="<?php echo $tableau; ?>" onchange="change();" name="<?php echo $tableau; ?>">
        <option value="0" style="background:url('images/icone_presence_journee_v2.png') no-repeat; width:15px; height:15px;"></option>
        <option value="1" style="background:url('images/icone_absence_matin_v2.png') no-repeat; width:15px; height:15px;"></option>
        <option value="2" style="background:url('images/icone_absence_apresmidi_v2.png') no-repeat; width:15px; height:15px;"></option>
        <option value="3" style="background:url('images/icone_absence_journee_v2.png') no-repeat; width:15px; height:15px;"></option>
       </select><?php 
       $compteur++;
      } ?>
     <input type="submit" name="maj" value="Envoyer" />
    </form>
    <p>&nbsp;</p>
    <p><strong>L&eacute;gende :</strong></p>
    <p> <img src="images/icone_presence_journee_v2.png" width="15" height="15" /> Usager pr&eacute;sent <br />
      <img src="images/icone_absence_matin_v2.png" width="15" height="15" /> Absent le matin<br />
    <img src="images/icone_absence_apresmidi_v2.png" width="15" height="15" /> Absent l'apr&egrave;s-midi<br />
    <img src="images/icone_absence_journee_v2.png" width="15" height="15" /> Absent la journ&eacute;e </p>
    </body>
    </html>
    Ma difficulté est de faire une relation entre :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <select id="<?php echo $tableau; ?>" ...>
    et le JavaScript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    select=document.getElementById("select");
    Je ne trouve pas un moyen de remplacer document.getElementById("select") par la valeur récupérée dans $tableau.

    Merci de votre aide.

    Bien cordialement

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Un ID est unique, par conséquent il ne peut pas être utilisé pour plusieurs éléments. Changer l'ID avec une valeur de compteur comme select1, select2, select3 peut marcher mais ça reste vraiment pas terrible, les IDs ne sont pas faits pour ça.

    Mieux vaut écrire :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    onchange="change(this)"

    et récupérer l'élément select correspondant en argument de la fonction change :

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    function change(select) { 
    var select_s = select.style;

    Enfin, pense toujours à déclarer tes variables JavaScript avec le préfixe var, c'est important.

  3. #3
    Membre averti
    Inscrit en
    Juillet 2004
    Messages
    45
    Détails du profil
    Informations forums :
    Inscription : Juillet 2004
    Messages : 45
    Par défaut
    Merci et ça fonctionne bien

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

Discussions similaires

  1. image dans une liste déroulante
    Par djouk dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 24/11/2010, 13h03
  2. [E-07] Images dans une liste déroulante
    Par vincent 67 dans le forum Excel
    Réponses: 8
    Dernier message: 16/02/2009, 20h37
  3. Inserer une image dans une liste déroulante
    Par arnaud.crassat dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 26/08/2007, 12h04
  4. image dans une liste déroulante
    Par dudu134 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 16/05/2007, 14h51
  5. Mettre des images dans une liste déroulante
    Par PrinceMaster77 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 01/12/2006, 15h35

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