Publié le 08/03/2013
Auteur fobec
Réseaux sociaux
0 partages
0 tweets
0 plus
2 commentaires

Selectionner une valeur dans une liste deroulante

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
combo1088Pour 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>
A l'affichage de la page, voyons comment sélectionner la valeur vert par défaut dans la liste.

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>
...
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.

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>
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.

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.
avatar Amal

Publié par Amal

le 14/01/2013 à 15:33:44

pour moi j'ai créé une liste déroulante en liaisant avec la base de donnée déja existant mais la valeur sélectionné ne peut pas etre afficher jamais et je ne sais pas c koi le probléme c mon code :
<?php
</center>" ;

// connexion à la base
$serveurBD = "localhost";
$nomUtilisateur = "root";
$motDePasse = "";
$Database = "vtigercrm520";


$idConnect = mysql_connect($serveurBD, $nomUtilisateur , $motDePasse ) or die( "Connexion impossible.");
mysql_select_db( $Database) or die( "Accès base impossible.");

// Requête SQL
$rqSql = "SELECT user_name,id FROM vtiger_users ";
// Exécution de la requête
$result = mysql_query( $rqSql, $idConnect)
or die( "Exécution requête impossible.");
mysql_close($idConnect);

// Construction de la chaîne de caractères qui fait la liste


echo "<br/ >";

//mysql_close($idConnect);
?>

<?php
print $ld ;

echo "<br /><br />\n";
?>


svp qq1 peut m'aider !!!

avatar Sophie

Publié par Sophie

le 27/07/2012 à 10:16:08

Merci pour cette explication claire qui m'aide grandement... JS et moi, on est pas encore copain !

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
tuto - webmaster
Mise a jour
08/03/2013
Visualisation
vu 15366 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 261 articles
|BIO_PSEUDO|
Commentaires récents

Publié par PizzaToy dans php5

Salut,
super Class mais elle a fait son temps. Il faut maintenant passer la version 1.1 de l'API Twitter search et son authentification !

Publié par OmegaPlatypus dans java

Dans mon cas, plusieurs lettres etaient repetes plusieurs fois, dont la derniere a l'indfiniment. En ajoutant robot.keyReleaseKeyEvent.VK_A, robot.keyReleaseKeyEvent.VK_X, etc. apres chacune des frap...

Publié par Kezouille dans java

Bonjour Axel,

Merci pour ce petit guide qui m'a bien aide dans ma tache. En effet j'ai developpe une petite application afin de detecter l'ajout d'un fichier une image dans un repertoire et de...

Publié par skud dans java

La methode getTextFile() etant statique, il faut donc l'appeler de maniere statique. Modifier l'exemple de la maniere suivante

System.out.print(HTTPLoader.getTextFile('http://fobec.com/CMS/ind...

Publié par Tom dans java

Hello!
Cependant, mon Eclipse ne reconnait pas HttpLoader comme type valide...
Comment faire pour que ca marc...