Accueil > > > AFFICHER UNE LISTE DÉROULANTE EN FONCTION D'UNE AUTRE LISTE SANS RECHARGER LA PAGE OU PASSER L'INFORMATION PAR L'URL.
 AFFICHER UNE LISTE DÉROULANTE EN FONCTION D'UNE AUTRE LISTE SANS RECHARGER LA PAGE OU PASSER L'INFORMATION PAR L'URL.
 Information sur la source
 Description
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-.ph p 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
- <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>
<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)
 Historique
- 11 septembre 2004 22:33:56 :
- Ajout de l'affichage des données de la 2ème liste déroulante dès le départ.
Si ca ne marche pas alors veuillez changer les mots array par Array et list par List.
- 29 septembre 2005 16:22:39 :
- http://perso.wareteam.com/comment_demander_des_informations_au_serveur_sans_recharger_la_page-.php
 Sources de la même categorie
 Commentaires et avis
|
Derniers Blogs
 IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|