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 45 981 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

cs_sory1
Messages postés
9
Date d'inscription
lundi 26 juillet 2004
Statut
Membre
Dernière intervention
8 janvier 2005
-
ajout6.php3 est une autre page ou c'est le nom de la page elle meme

<form method="POST" action="Ajout6.php3">
cs_frop01
Messages postés
1356
Date d'inscription
lundi 27 octobre 2003
Statut
Membre
Dernière intervention
19 novembre 2008
1 -
Salut,

Je n'avais pas pensé à commenté cette partie du code. Merci !

Ajout6.php est une autre page qui va traiter les informations (Enregistrement ou autre)

Les Valeurs seront stockés dans les variables cat et souscat.

Exemple de récupération des données dans Ajout6.php :

$cat=$_POST['cat'];
$souscat=$_POST['souscat'];

Merci !
cs_frop01
Messages postés
1356
Date d'inscription
lundi 27 octobre 2003
Statut
Membre
Dernière intervention
19 novembre 2008
1 -
Salut,

J'ai fais le test dans mon compte d'hébergement et voici le résultat :
http://cyberscorp.e-odyssey.net/combo.php

Effectivement, j'ai constaté des erreurs au niveau du tableau List (array) dans ton cas, et je vais me renseigner là dessus .

Merci.
cs_frop01
Messages postés
1356
Date d'inscription
lundi 27 octobre 2003
Statut
Membre
Dernière intervention
19 novembre 2008
1 -
Alors,

L'erreur vient du non respect de la case majuscule.

Remplacer dans votre code :

array par Array
list par List

et normalement, ca doit marcher.

Merci zoukozouko de m'en avoir informé.

NB : pourtant le code que j'ai copier ici est juste mais l'affichage a changé.
zoukozouko
Messages postés
148
Date d'inscription
dimanche 25 janvier 2004
Statut
Membre
Dernière intervention
21 janvier 2009
-
Ok maintenan ca fonctionne. j'avais deja modifié l'erreur de majuscule sur list, mais je n'avais pas vu celle de Array. Merci encore. C'est une tres bonne source, tres utile. J'utilise ces sous liste dans 4 de mes sites et tous rechargeaient la page. Plus maintenant!!!!
Merci

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.