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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 46 243 fois - Téléchargée 32 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
-
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
15
Date d'inscription
vendredi 10 décembre 2010
Statut
Membre
Dernière intervention
19 mars 2012
-
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
-
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
-
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
-
Salut,

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

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.