Publié le
08/03/2013
Réseaux sociaux
0 partages
0 tweets
0 plus
2 commentaires
Sélectionner une valeur dans une liste déroulante
Comment remplir un formulaire à partir d'une requête dans la base de donnée ?
Lorsque l'on génère le code HTML d'un formulaire, les listes déroulantes deviennent souvent un casse-tête. Pour sélectionner par défaut une valeur dans une liste, nous verrons un variante dynamique en PHP et une solution plus élégante en JavaScript.
Exemple de formulaire
Pour illustrer la sélection d'une valeur, prenons un formulaire classique contenant une liste déroulante. La combobox contient 3 valeurs blanc, rouge et vert (image ci-contre).
Par défaut aucune valeur n'est sélectionnée dans la liste déroulante.
A l'affichage de la page, voyons comment sélectionner la valeur vert par défaut dans la liste.Note: cette technique mélange code HTML et PHP dans un script puisque les éléments de la liste $all sont à déclarer en constante.Pour sélectionner la valeur vert dans la liste, il suffit d'appeler la fonction avec les arguments suivants
selectComboValue("cbcolor","vert"). Cet appel pourra se faire dans le onload ou en fin du document HTML.
La variante en Javascript est pratique lorsque le formulaire comporte plusieurs listes déroulantes. Pour chaque liste, la fonction selectComboValue sera appelée avec des paramètres différents.
Lorsque l'on génère le code HTML d'un formulaire, les listes déroulantes deviennent souvent un casse-tête. Pour sélectionner par défaut une valeur dans une liste, nous verrons un variante dynamique en PHP et une solution plus élégante en JavaScript.
Exemple de formulaire
Pour illustrer la sélection d'une valeur, prenons un formulaire classique contenant une liste déroulante. La combobox contient 3 valeurs blanc, rouge et vert (image ci-contre).
Par défaut aucune valeur n'est sélectionnée dans la liste déroulante.
<html>
<head>
<title>exemple selection liste deroulante</title>
</head>
<body>
<form method="POST" action="">
<select size="1" id="cbcolor" name="cbcolor">
<option value="blanc">blanc</option>
<option value="rouge">rouge</option>
<option value="vert">vert</option>
</select>
</form>
</body>
</html>
Générer le code HTML en PHP
La variable $all contient toutes les valeurs de la liste déroulante. Avec une boucle, les éléments sont ajoutés au fur et à mesure à la liste. L'attribut selected est inséré lorsque l'élément correspond à la valeur à sélectionner $toselect...
<select size="1" id="cbcolor" name="cbcolor">
<?php
//valeur a selectionner dans la liste
$toselect='vert';
//toutes les valeurs possibles dans la liste
$all=array('blanc', 'rouge', 'vert');
foreach ($all as $val) {
if ($val==$toselect) {
echo '"'.$val.'" selected>'.$val.'';
} else {
echo '"'.$val.'">'.$val.'';
}
}
?>
</select>
...
Sélectionner la valeur avec Javascript
Le code HTML reste intacte, la liste déroulante comporte l'ensemble des éléments en dur. Dans le head ou en fin de document, la fonction javascript selectComboValue() est ajoutée.<html>
<head>
<title>exemple selection liste deroulante</title>
</head>
<body>
<form method="POST" action="">
<select size="1" id="cbcolor" name="cbcolor">
<option value="blanc" selected>blanc</option>
<option value="rouge">rouge</option>
<option value="vert">vert</option>
</select>
</form>
<script type="text/javascript">
function selectComboValue(comboId, comboval) {
comboBox=document.getElementById(comboId);
if (comboBox) {
for(var i=0;i<=comboBox.length-1;i=i+1) {
var text=comboBox.options[i].value;
if(text==comboval)
{
comboBox.selectedIndex=i;
break;
}
}
}
}
</script>
</body>
</html>
selectComboValue("cbcolor","vert"). Cet appel pourra se faire dans le onload ou en fin du document HTML.
La variante en Javascript est pratique lorsque le formulaire comporte plusieurs listes déroulantes. Pour chaque liste, la fonction selectComboValue sera appelée avec des paramètres différents.
