28172 sujets

CSS et mise en forme, CSS3

Background (image) dans <option> d'un select

J'ai réalisé les icônes dans la liste déroulante : cf lien : http://www.irpa-epdsae.fr/die_calendrier/choix_legende_bis.php

Tout semble bien fonctionner.

Voici le programme :

<!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) {

var 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 $valeur_recuperee . " = " . $absence_recuperee . "<br />";
$compteur++;
} ?>
<br /><?php
}

$compteur=1; ?>

<form id="form1" name="form1" method="post" action=""><?php
while($compteur<=5)
{
$tableau="absence" . $compteur; ?>
<select id="<?php echo $tableau; ?>" onchange="change(this);" 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>

------------------------------------------------------------------------------------------

Mais le soucis est qu'après avoir récupéré les valeurs de la table, je n'ai pas réussi à faire apparaître des icônes dans la liste déroulante par défaut.

j'ai utilisé la fonction :
<option value="1" <?php if ($tableau==1) { ?> selected="selected" <?php } ?> style="background:url('images/icone_absence_matin_v2.png') no-repeat; width:15px; height:15px;"></option>

Par exemple, après avoir récupéré la valeur de la variable $tableau (1), on veut apparaître l'icône par défaut dans la liste déroulante mais là, ça ne fonctionne pas.

Peut-être faut-il ajouter quelque fonction en gras :
<option value="1" <?php if ($tableau==1) { ?> selected="selected" <?php } ?> style="background:url('images/icone_absence_matin_v2.png') no-repeat; width:15px; height:15px;">?????????</option>

Merci de votre aide
Sujet clos
Aller à