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

Commenter

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

S'inscrire maintenant

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.

Du même auteur (cs_frop01)