[druhill33] interaction entrelistes déroulantes

Télécharger le projet
Commenter

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 / Exemple : 


<!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.
Télécharger le projet

Codes Sources

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 (Kenaghdar)