Afficher une liste déroulante en fonction d'une autre liste sans recharger la page ou passer l'information par l'url.

4/5 (80 avis)

Snippet vu 50 010 fois - Téléchargée 34 fois

Contenu du snippet

Ce code permet d'afficher une liste dont le contenu dépend du choix fait dans une autre. (afficher la liste des sous-catégories d'une catégorie séléctionné dans une autre liste)

L'avantage de code c'est que le résultat de la deuxième liste n'a pas besoin de recharger une deuxième fois la page (affichage dynamique).

Mais cette méthode n'est pas recommandé pour un grand nombre de données.
Dans le cas où le nombre de données est très important et que le fait d'utiliser un array bouffe trop de resources et de mémoire coté serveur! il est recommendé d'utiliser la technologie AJAX pour interroger le serveur avec javascript pour tirer les informations voulus sans recharger la page.

Voici le lien pour le code utilisant la méthode AJAX :

http://perso.wareteam.com/comment_demander_des_informations_au_serveur_sans_recharger_la_page-.php

Je voudrais remercier flashfun pour ses précieux conseils.

Je tiens à remercier aussi GRenard qui m'a fait découvrir "AJAX" et malalam pour son code source "tagboard".

Source / Exemple :


<html>

<head>
<title>Créer par Frop01 (Membre du Club CodeS-Source.com)</title>
<script>
List = new Array();
function Remplir(valeur){
  var sel="";
  sel ="<select size='1' name='souscat'>";
  // Parcourir le tableau
  for (var i=0;i<List.length;i++)
   {
     // tester si la ligne du tableau (Sous-catégorie) correspond à la valeur de la catéhorie
     if (List[i][1]==valeur)
     {
       // Ajouter une rubrique sous-catégorie au variable SEL
       sel= sel + "<option value="+List[i][0]+">"+List[i][2]+"</option>";
     }

   }
   sel =sel + "</select>";
   // Modifier le DIV scat par la nouvelle List à partir du variable SEL
   document.getElementById('scat').innerHTML=sel;
}
</script>
</head>
<body>

<form method="POST" action="Ajout6.php3">
  <select size="1" name="cat" OnChange="Remplir(cat.value)">
<?php
// Paramètres de la Connexion à la base MYSQL
$user="root";
$host="localhost";
$password="";
$database="essai";
$i=0; // variable de test
$j=0; // variable pour garder la valeur du premier enregistrement catégorie pour l'affichage

$connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible");

mysql_select_db($database,$connexion);

// Séléction de tous les enregistrements de la table Catégorie
$rq="Select * from categorie order by designation;";
$result= mysql_query ($rq) or die ("Select impossible");

while ($dt=mysql_fetch_row($result))
{
 // Remplir la liste déroulante des catégorie
 echo "\t\t<option value=".($dt[0]).">".($dt[1])."</option>";
 if ($i==0) { $j=$dt[0]; $i=1; } // garder la valeur du premier enregistrement
}

?>

</select><br><br>

<DIV id="scat">
<select size="1" name="souscat">
</select>
</DIV>

<?php

// Séléction de tous les enregistrements de la table Sous-Catégorie
$rq="Select * from sous_categorie order by designation;";
$result= mysql_query ($rq) or die ("Select impossible");
// $i = initialise le variable i
$i=0;
while ($dt=mysql_fetch_row($result))
{
 // Remplir le tableau (array) en javascript
 // ex : List[1]=new Array (1,1,"Sous-catégorie 1");
 // ex : List[2]=new Array (2,1,"Sous-catégorie 2");
 echo "<script>List[".$i."] = new Array(".($dt[0]).",".($dt[1]).",'".($dt[2])."');</script>";
 $i=$i+1; // Incrémentation de $i
}
echo "<script>Remplir ($j); </script>"; // Remplir la deuxième liste de choix avec les données
                                        // des sous-catégories en utilisant la valeur j
?>
<br><br>
  <input type="submit" name="Send" value="Envoyer">
</form>

</body>

</html>

Conclusion :


Base de données exemple :

# phpMyAdmin SQL Dump
# version 2.5.3
# http://www.phpmyadmin.net
#
# Serveur: localhost
# Généré le : Samedi 28 Août 2004 à 13:05
# Version du serveur: 4.0.15
# Version de PHP: 4.3.3
#
# Base de données: `essai`
#

# --------------------------------------------------------

#
# Structure de la table `categorie`
#

CREATE TABLE `categorie` (
`id_cat` int(5) NOT NULL auto_increment,
`designation` varchar(50) NOT NULL default '',
`comment` varchar(255) NOT NULL default '',
PRIMARY KEY (`id_cat`),
UNIQUE KEY `designation` (`designation`)
) TYPE=MyISAM AUTO_INCREMENT=9 ;

#
# Contenu de la table `categorie`
#

INSERT INTO `categorie` VALUES (1, 'Ressources Webmaster', 'Site dédié aux webmasters. Tutorials, Exemples, Codes Sources, ressources, images, Cliparts, Gifs, Forums ...');
INSERT INTO `categorie` VALUES (2, 'Downloads', 'Téléchargement freeware, shareware...');
INSERT INTO `categorie` VALUES (3, 'Programmation', 'Developpement programmation');

# --------------------------------------------------------

#
# Structure de la table `sous_categorie`
#

CREATE TABLE `sous_categorie` (
`id_scat` int(5) NOT NULL auto_increment,
`idcat` int(5) NOT NULL default '0',
`designation` varchar(50) NOT NULL default '',
`comment` varchar(255) NOT NULL default '',
PRIMARY KEY (`id_scat`),
UNIQUE KEY `designation` (`designation`)
) TYPE=MyISAM AUTO_INCREMENT=9 ;

#
# Contenu de la table `sous_categorie`
#

INSERT INTO `sous_categorie` VALUES (5, 1, 'Php & Mysql', 'Forums, Tutorials, Codes Sources ..');
INSERT INTO `sous_categorie` VALUES (4, 3, 'Visual Basic', 'VB, VB.NET, Crystal Report, Access, SQL SERVER ..');
INSERT INTO `sous_categorie` VALUES (6, 1, 'Javascript', 'Tutorials pour javascript, Forums ...');
INSERT INTO `sous_categorie` VALUES (2, 1, 'Gifs animés, Icônes', 'Téléchargement gifs animés , clipart, Icones');
INSERT INTO `sous_categorie` VALUES (1, 1, 'Templates', 'Sites de téléchargement de modèles de site web');
INSERT INTO `sous_categorie` VALUES (3, 2, 'Pilotes', 'Drivers, pilotes, carte graphiques');
INSERT INTO `sous_categorie` VALUES (7, 2, 'Freeware, sharware', 'Freeware, sharware');
INSERT INTO `sous_categorie` VALUES (8, 3, 'SQL SERVER', 'Tutorials forum SQL SERVER');

Méthode :

1/ Chargement de liste des catégories.
2/ Chargement de tous les sous-catégories dans un tableau
3/ Lors de la séléction d'une catégorie, la 2ème liste se remplie par les données adéquates à partir du tableau déjà chargé. (Modification de la liste par InnerHTML)

A voir également

Ajouter un commentaire Commentaires
molki Messages postés 2 Date d'inscription jeudi 19 juin 2003 Statut Membre Dernière intervention 21 juin 2011
21 juin 2011 à 13:46
Bonjour
Je viens de pas mal cafouiller pour adapter cette super source à mon environnement !
Cependant, je vous le livre si ça peut aider.
Je suis en Oracle en ADODB et je n'ai qu'une table "normale" avec des dates (21/07/2011) et des heures entières (8 ou 9) et une case de rendez-vous (vide ou non)
Je veux afficher les dates uniques en 'cat' et les heures dispo de cette date en 'scat'.

Voilà le résultat qui tourne correctement, merci !!

<html>

<head>
<title>Créer par Frop01 (Membre du Club CodeS-Source.com)</title>
<script>
List = new Array();
function Remplir(valeur)
{
var sel="";
sel ="<select size='1' name='souscat'>";
// Parcourir le tableau
for (var i=0;i<List.length;i++)
{
// tester si la ligne du tableau (Sous-catégorie Date) correspond à la Date de la catégorie ex : List[2]=new Array ('04/07/2011',9);
if (List[i][0]==valeur)
{
// Ajouter une rubrique sous-catégorie au variable SEL
sel= sel + "<option value="+List[i][1]+">"+List[i][1]+"</option>";
}

}
sel =sel + "</select>";
// Modifier le DIV scat par la nouvelle List à partir du variable SEL
document.getElementById('scat').innerHTML=sel;
}
</script>
</head>

<form method="POST" action="rdvd_date.php">
<select size="1" name="cat" OnChange="Remplir(cat.value)">
<?php
// Paramètres de la Connexion à la base MYSQL
session_start();

require ('adodb.inc.php');
include ("fonctions/rdvd_fonc.php");
include ("config/rdvd_config.php");
$adocon = &ADONewConnection("oci8");
$adocon->PConnect($DB_HOST,$DB_USER,$DB_PASS);

$i=0; // variable de test
$j=0; // variable pour garder la valeur du premier enregistrement catégorie pour l'affichage

$today=date("d/m/Y");
$sql_getdates_libres = "select distinct DAT_RDV from RDVD_RDV where DAT_RDV>TO_DATE('$today','DD/MM/YYYY') and COD_CAN is null order by DAT_RDV";
//echo "
$sql_getdates_libres";
$rs0 = $adocon->Execute($sql_getdates_libres);
$i=0;
while (!$rs0->EOF)
{
$DAT_RDV = format_datez_rdv($rs0->fields["DAT_RDV"]);
echo "\t\t<option value=$DAT_RDV>$DAT_RDV</option>";
if ($i==0) { $j="'$DAT_RDV'"; $i=1; } // garder la valeur du premier enregistrement
$rs0->MoveNext();
}
?>

</select>

<select size="1" name="souscat">
</select>

<?php

// Séléction de tous les enregistrements de la table Sous-Catégorie
$sql_getheures_libres = "select DAT_RDV, HEU_RDV from RDVD_RDV where DAT_RDV>TO_DATE('$today','DD/MM/YYYY') and COD_CAN is null group by DAT_RDV, HEU_RDV";
//echo "
$sql_getheures_libres";
$rs1 = $adocon->Execute($sql_getheures_libres); // or die ("Select impossible");
$i=0;
while (!$rs1->EOF)
{
$HEU_RDV = $rs1->fields["HEU_RDV"];
$DAT_RDV = format_datez_rdv($rs1->fields["DAT_RDV"]);
// Remplir le tableau (array) en javascript
// ex : List[1]=new Array ('04/07/2011',8);
// ex : List[2]=new Array ('04/07/2011',9);
echo "<script>List[$i] = new Array('$DAT_RDV',$HEU_RDV);</script>";
$i++;
$rs1->MoveNext();
}
echo "<script>Remplir ($j); </script>"; // Remplir la deuxième liste de choix avec les données
// des sous-catégories en utilisant la valeur j
?>


</form>

</html>
cs_hantouva Messages postés 12 Date d'inscription vendredi 10 décembre 2010 Statut Membre Dernière intervention 19 mars 2012
24 mars 2011 à 11:50
bonjour;
je viens d'utiliser votre code afin d'afficher les communes relative aux wilaya cepensdant jutilise une base de donnees sql server au lieu de my sql, la liste derouante de wilaya fonctionne cependant celle de commune( s'affiche vide et un message derreur saffiche avec, je ne trouve pas ou es le probleme jai repri le script ds head comme tel pourriez vous m'aider si vous avez une idee svp sachant que la partie connexion la bd s'effectue sans aucun pb

voici message derreur
Notice: Undefined offset: 1 in C:\wamp\www\\ECOF.php on line 258

Notice: Undefined offset: 2 in C:\wamp\www\ECOF.php on line 258
ligne 258: echo "<script>List[".$i."] = new Array(".($row[0]).",".($row[1]).",'".($row[2])."');</script>";

voici mon code
partie liste deroulante de wilaya
<select class="arrondi" name="cat" dir="ltr" OnChange="Remplir(cat.value)">

<option value="-1">- - - Choisissez une wilaya - - -</option>

<?php
$i=0;
$j=0;

$query=odbc_exec ($sqlconnect,"SELECT wilayalib FROM wilaya" );

while(odbc_fetch_into($query,$row))
{


echo "\t\t<option value=".($row[0]).">".($row[0])."</option>";
if ($i==0) { $j=$row[0]; $i=1; } // garder la valeur du premier enregistrement
}

?>
</select>


partie code et liste de commune




<select class="arrondi" maxlength="20" name="souscat" >

</select>


</td>
<?php
// Séléction de les enregistrements de la table commune

$query=odbc_exec ($sqlconnect,"SELECT comlib FROM commune " );

while(odbc_fetch_into($query,$row))

// $i = initialise la variable i
$i=0;

{
// Remplir le tableau (array) en javascript
// ex : List[1]=new Array (1,1,"Sous-catégorie 1");
// ex : List[2]=new Array (2,1,"Sous-catégorie 2");
echo "<script>List[".$i."] = new Array(".($row[0]).",".($row[1]).",'".($row[2])."');</script>";
$i=$i+1; // Incrémentation de $i
}
echo "<script>Remplir ($j); </script>"; // Remplir la deuxième liste de choix avec les données
// des communes en utilisant la valeur j
?>


ma table wilaya contient comme champ: wilayalib,id_wilaya
table commune continent: comlib,id_com,id_wilaya


merci bcq
infoges Messages postés 9 Date d'inscription jeudi 1 avril 2010 Statut Membre Dernière intervention 4 avril 2010
1 avril 2010 à 14:11
Bonjour frop01,
Dans le cadre de la préparation de mon projet de fin d'étude, j'ai une tâche pareille avec celle de ton code des deux listes déroulantes liées alimentées de la base de données MySql.
j'ai essayé ton code avec ta base de données et ça marche très bien mais en l'appliquant sur la mienne, il y aura un affichage du contenu de la première liste déroulante mais la deuxième liste reste vide si c'est possible peux-je vous envoyer mon code et ma base de données pour m'orienter vers la bonne solution. Franchement, j'ai essayé tant de fois de comprendre le principe du fonctionnement du code JavaScript avec celle de l'affichage de la deuxième liste déroulante sans cesse.
Dans l'attente de votre réponse, veuillez agréer Monsieur, mes salutations les plus distinguées.
Amicalement
cs_saille Messages postés 8 Date d'inscription vendredi 27 novembre 2009 Statut Membre Dernière intervention 15 février 2013
27 nov. 2009 à 11:49
Bonjour,

Je cherche a utiliser ce code, qui correspond tout à fait à ce dont j'ai besoin.

Ma seconde liste déroulante ne contient rien.

Je charge correctement ma première liste (en affichage code source j'ai entre autre :

<form method="POST" action="Ajout6.php3">
<select size="1" name="cat" OnChange="Remplir(cat.value)">
<option value='23001'>AHUN</option> etc etc

A noter que j'ai mis entre ' ' l'option value (code postal), comme dans la tables, mais sans les ' ' c'est pareil.

Je charge correctement mon tableau (toujours en affichage code source) :

<script>List[0] = new Array(AINC,LE CHAMP DE LA VILLE,'03003');</script><script>List[1] = new Array(AINR,LES RECOLLETS,'03003') etc etc

Je n'ai rien modifié au script java, sauf le test puisque je veux tester le code postal :

if (List[i][2]==valeur)

Merci si quelqu'un a une idée
Saille désemparée
dilettante2008 Messages postés 1 Date d'inscription lundi 4 décembre 2000 Statut Membre Dernière intervention 1 octobre 2009
1 oct. 2009 à 07:58
Salut,

Juste merci pour la ressource, c'est simple et très efficace.
Afficher les 80 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.