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