Image dans la liste déroulante

**EricDou** · 10/06/2014, 13h41

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

**SylvainPV** · 10/06/2014, 16h42

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.

**EricDou** · 11/06/2014, 09h19

Merci et ça fonctionne bien

Image dans la liste déroulante

JavaScript

Vue hybride

Discussions similaires

Partager

Partager