begin process at 2012 05 28 13:37:28
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > [DRUHILL33] INTERACTION ENTRELISTES DÉROULANTES

[DRUHILL33] INTERACTION ENTRELISTES DÉROULANTES


 Information sur la source

Note :
7,8 / 10 - par 5 personnes
7,80 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Débutant Date de création :25/06/2003 Date de mise à jour :25/06/2003 00:54:20 Vu / téléchargé :9 553 / 1 043
Auteur : Kenaghdar

Ecrire un message privé
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 Description

Hello,

Ma seconde source est à nouveau en réponse à une question posée par druhill33. Donc, les critiques constructives sont les bienvenues, autant pour lui que pour moi :)

Il s'agit donc de modifier le contenu d'une liste déroulante en fonction de la valeur d'une première liste déroulante. Le tout en Javascript, sans scripts serveurs.

Il y a 3 fichiers dans le zip: le code HTML (présent ci-dessous), un fichier JS qui construit le tableau permettant d'effectuer le lien entre les 2 listes déroulantes, et un fichier de CSS. Juste pour faire un peu plus joli niveau présentation. Donc, inutile!

La technique est simple: un tableau associatif dont la clé correspond à la valeur de la première liste déroulante. La valeur stockée dans le tableau est une liste de valeurs séparées par le caractère ';'.

Pour le reste, le code est suffisamment commenté. Enfin je pense. Sinon, n'hésitez pas à me demander.

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  • <html>
  • <head>
  • <title>Listes déroulantes dynamiques</title>
  • <link rel="stylesheet" type="text/css" href="JS-DynamicSelect.css">
  • <script language="javascript" src="JS-DynamicSelect.js"></script>
  • <script language="javascript">
  • function setRegion(oSelect) {
  • // Par défaut, la valeur de retour de l'event est mis à false.
  • event.returnValue = false;
  • // L'objectif est de charger la liste déroulante slRegion en
  • // fonction de la valeur sélectionnée dans la liste déroulante
  • // courante (identifiée par le paramètre oSelect). La liste
  • // slRegion va être construite dynamiquement en utilisant le
  • // tableau tCountyLink.
  • if (oSelect != null) {
  • // On vérifie que l'entrée dans tRegionLink existe pour la
  • // valeur de oSelect.
  • if (tRegionLink[oSelect.value] != undefined) {
  • // L'entrée existe, on peut donc récupérer la chaine des
  • // régions et la convertir en tableau.
  • var tRegions = new Array;
  • tRegions = tRegionLink[oSelect.value].split(";");
  • // Nous pouvons mettre à jour le titre pour les régions.
  • var oLabel = document.all.lbRegion;
  • if (oLabel != null) oLabel.innerText = tRegions[0] + ":";
  • // On trie le tableau des régions, juste pour la frime,
  • // après avoir supprimé la première entrée. L'idéal étant
  • // d'avoir les éléments déjà trier dans la string :)
  • tRegions.shift(); tRegions.sort();
  • // Puis, construisons le contenu de la liste slRegion.
  • var oRegions = document.all.slRegion;
  • if (oRegions != null) {
  • // D'abord, nous devons nettoyer la contenu actuel de
  • // la liste slRegion.
  • oRegions.innerHTML = "";
  • // Ensuite, nous pouvons générer le nouveau contenu.
  • for (cnt=0; cnt<tRegions.length; cnt++) {
  • var oOption = document.createElement("OPTION");
  • oRegions.options.add(oOption);
  • oOption.innerText = tRegions[cnt];
  • oOption.value = cnt;
  • }
  • // En théorie, tout s'est bien passé, donc fixons la
  • // valeur de retour de l'event à true.
  • event.returnValue = true;
  • }
  • }
  • }
  • // On désactive l'héritage de l'event.
  • event.cancelBubble = true;
  • }
  • </script>
  • </head>
  • <body onload="setRegion(document.all.slCountry);">
  • <div class="box">
  • <div class="dvLabel" id="lbCountry">Pays:</div>
  • <div class="dvSelec" id="dvCountry">
  • <select id="slCountry" onchange="setRegion(this);" class="inSelect">
  • <option value="BE">Belgique</option>
  • <option value="FR">France</option>
  • </select>
  • </div>
  • </div>
  • <div class="boxRight">
  • <div class="dvLabel" id="lbRegion"></div>
  • <div class="dvSelec" id="dvRegion">
  • <select id="slRegion" class="inSelect"></select>
  • </div>
  • </div>
  • </body>
  • </html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Listes déroulantes dynamiques</title>
    <link rel="stylesheet" type="text/css" href="JS-DynamicSelect.css">
    <script language="javascript" src="JS-DynamicSelect.js"></script>
    <script language="javascript">
    function setRegion(oSelect) {
        // Par défaut, la valeur de retour de l'event est mis à false.
        event.returnValue = false;
        // L'objectif est de charger la liste déroulante slRegion en
        // fonction de la valeur sélectionnée dans la liste déroulante
        // courante (identifiée par le paramètre oSelect). La liste
        // slRegion va être construite dynamiquement en utilisant le
        // tableau tCountyLink.
        if (oSelect != null) {
            // On vérifie que l'entrée dans tRegionLink existe pour la
            // valeur de oSelect.
            if (tRegionLink[oSelect.value] != undefined) {
                // L'entrée existe, on peut donc récupérer la chaine des 
                // régions et la convertir en tableau.
                var tRegions = new Array;
                tRegions = tRegionLink[oSelect.value].split(";");
                // Nous pouvons mettre à jour le titre pour les régions.
                var oLabel = document.all.lbRegion;
                if (oLabel != null) oLabel.innerText = tRegions[0] + ":";
                // On trie le tableau des régions, juste pour la frime,
                // après avoir supprimé la première entrée. L'idéal étant
                // d'avoir les éléments déjà trier dans la string :)
                tRegions.shift(); tRegions.sort();
                // Puis, construisons le contenu de la liste slRegion.
                var oRegions = document.all.slRegion;
                if (oRegions != null) {
                    // D'abord, nous devons nettoyer la contenu actuel de
                    // la liste slRegion.
                    oRegions.innerHTML = "";
                    // Ensuite, nous pouvons générer le nouveau contenu.
                    for (cnt=0; cnt<tRegions.length; cnt++) {
                        var oOption = document.createElement("OPTION");
                        oRegions.options.add(oOption);
                        oOption.innerText = tRegions[cnt];
                        oOption.value = cnt;
                    }
                    // En théorie, tout s'est bien passé, donc fixons la
                    // valeur de retour de l'event à true.
                    event.returnValue = true;
                }
            }
        }
        // On désactive l'héritage de l'event.
        event.cancelBubble = true;
    }
    </script>
</head>

<body onload="setRegion(document.all.slCountry);">
    <div class="box">
        <div class="dvLabel" id="lbCountry">Pays:</div>
        <div class="dvSelec" id="dvCountry">
            <select id="slCountry" onchange="setRegion(this);" class="inSelect">
                <option value="BE">Belgique</option>
                <option value="FR">France</option>
            </select>
        </div>
    </div>
    <div class="boxRight">
        <div class="dvLabel" id="lbRegion"></div>
        <div class="dvSelec" id="dvRegion">
            <select id="slRegion" class="inSelect"></select>
        </div>
    </div>
</body>
</html>

 Conclusion

Petit problème, si les données sont trop importantes, autrement dit si le tableau permettant de faire le lien entre les 2 listes déroulantes est trop grand, j'ai un peu peur que le script soit un peu long à se charger. Ce qui risque d'être très désagréable si le visiteur possède une connection lente.

Ken.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip PROTÉGER L'ACCÈS À UNE IMAGE PAR UN DIV TRANSPARENT
Toutes les sources de Kenaghdar

 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de Granola le 26/06/2003 08:17:50

Merci pour ce code !
M'en vais tester ça de suite...

Commentaire de Crazymatt le 18/02/2004 09:45:21

Ne fonctionne pas sous mozilla nickel sous IE

Commentaire de dside le 09/08/2004 11:52:18

Code ne fonctionnant sur autre browser qu'IE. Plutot genant car doit etre utilise sur Mozilla...
Une idee pour contourner le pb ?

Commentaire de dside le 09/08/2004 11:52:35

Code ne fonctionnant sur autre browser qu'IE. Plutot genant car doit etre utilise sur Mozilla...
Une idee pour contourner le pb ?

Commentaire de marial le 06/02/2007 16:32:42

Salut  Kenaghdar,
Pourquoi n'as-tupas preciser ou on doit ajouter les departements de chaque pays ?

Commentaire de marial le 06/02/2007 16:42:44

Pourquoi n'as-tu pas préciser où l'on doit place le code contenant les Departements ??

Commentaire de ludo64 le 03/03/2008 16:27:55

Bonjour tout le monde,
j'ai le même problème, le code ici-présent ne fonctionne pas sous Firefox. Appremment, il créé bien le nombre d'éléments de la deuxième liste en fonction de la première mais les valeurs ne s'affichent pas...
Quelqu'un a-t-il la solution svp ?
@+
Ludo.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,669 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)