Maison > Article > interface Web > Utiliser JavaScript pour implémenter le traitement de menus en cascade infinis

Utiliser JavaScript pour implémenter le traitement de menus en cascade infinis

WBOYoriginal: 2023-06-15 21:09:481736parcourir

Le menu en cascade infini est une méthode d'interaction frontale très courante et est largement utilisé dans de nombreux scénarios. Cet article vous présentera comment utiliser JavaScript pour implémenter des menus en cascade infinis. J'espère que cela vous sera utile.

1. Idées d'implémentation

L'idée d'implémenter des menus en cascade infinis sur le front-end peut être résumée ainsi :

Définir la source de données : est généralement un objet JSON utilisé pour stocker tous les niveaux de données de menu ;
Menu de rendu dynamique : lorsqu'un certain niveau d'options est sélectionné, le menu de niveau suivant est généré dynamiquement ; ##🎜🎜 #Obtenir des effets de liaison : lorsqu'une option d'un certain niveau est sélectionnée, le menu du niveau suivant doit être mis à jour dans le temps et les options disponibles doivent être modifiées en fonction de l'option sélectionnée.
Les idées spécifiques d'implémentation sont les suivantes :

Définir un tableau pour stocker la valeur sélectionnée à chaque niveau ; 🎜#Définissez plusieurs balises de sélection en HTML pour afficher les menus à chaque niveau ;

Liez un événement de modification à chaque balise de sélection. Lorsqu'une des options est sélectionnée, mettez à jour la position correspondante dans la valeur du tableau. , et génère la balise de sélection suivante, et restitue les options facultatives du niveau suivant en fonction des options du niveau précédent ;
boucles pour générer tous les niveaux de balises de sélection et les insère dans le DOM.
2. Implémentation du code
Dans le processus d'implémentation de menus en cascade infinis, deux parties principales sont impliquées, à savoir la mise en page de la page HTML et le JavaScript code de préparation. Examinons ensuite les détails de mise en œuvre des deux parties respectivement.

Mise en page HTML

<body>
    <form>
        <select id="province" onchange="changeProvince()">
            <option value="">请选择省份</option>
            <option value="1">浙江</option>
            <option value="2">江苏</option>
        </select>
        <select id="city" onchange="changeCity()"></select>
        <select id="area"></select>
    </form>
</body>

Implémentation du code JavaScript

var menuData = {
    "province": {
        "1": "杭州市",
        "2": "温州市"
    },
    "city": {
        "1": {
            "11": "西湖区",
            "12": "江干区"
        },
        "2": {
            "21": "鹿城区",
            "22": "瓯海区"
        }
    },
    "area": {
        "11": {
            "111": "西溪湿地",
            "112": "灵隐寺"
        },
        "12": {
            "121": "杭州大厦",
            "122": "江干公园"
        },
        "21": {
            "211": "南湖",
            "212": "红旗广场"
        },
        "22": {
            "221": "瓯海公园",
            "222": "龙湾湾国际商务区"
        }
    }
}

var level = ["province", "city", "area"];
var selectedValue = ["", "", ""];

function init() {
    generateMenu("province", "1");
}

function changeProvince() {
    selectedValue[0] = document.getElementById("province").value;
    document.getElementById("city").innerHTML = "";
    document.getElementById("area").innerHTML = "";
    generateMenu("city", selectedValue[0]);
}

function changeCity() {
    selectedValue[1] = document.getElementById("city").value;
    document.getElementById("area").innerHTML = "";
    generateMenu("area", selectedValue[1]);
}

function generateMenu(currentLevel, currentValue) {
    var select = document.createElement("select");
    select.setAttribute("id", currentLevel);
    select.setAttribute("onchange", "change" + currentLevel.charAt(0).toUpperCase() + currentLevel.slice(1) + "()");

    var option = document.createElement("option");
    option.setAttribute("value", "");
    option.innerHTML = "请选择" + currentLevel;
    select.appendChild(option);

    var submenu = menuData[currentLevel];
    for (var key in submenu) {
        if (submenu[key] != null) {
            var option = document.createElement("option");
            option.setAttribute("value", key);
            option.innerHTML = submenu[key];
            select.appendChild(option);
        }
    }

    document.getElementById(currentLevel).appendChild(select);
    if (currentValue != "") {
        document.getElementById(currentLevel).value = currentValue;
        if (level.indexOf(currentLevel) < level.length - 1) {
            var nextLevel = level[level.indexOf(currentLevel) + 1];
            generateMenu(nextLevel, selectedValue[level.indexOf(nextLevel)]);
        }
    }
}

init();

Ensuite, deux fonctions, changeProvince et changeCity, sont définies pour mettre à jour les valeurs de la province et de la ville sélectionnées, et régénérer le menu du niveau suivant.

Enfin, la fonction generateMenu est définie, qui est utilisée pour générer le menu du niveau actuel et effectuer des appels récursifs au niveau suivant. Lors du processus de génération du menu, la balise de sélection est générée et l'option correspondante est ajoutée, puis ajoutée au DOM une fois le rendu de chaque menu terminé. Si le niveau actuel n'est pas le dernier niveau, alors un appel récursif est effectué sur la base de la valeur actuellement sélectionnée jusqu'à ce que tous les niveaux de menus soient générés.

3. Résumé

Grâce à l'implémentation du code ci-dessus, nous pouvons voir qu'il n'est pas difficile d'implémenter des menus en cascade infinis en JavaScript. La méthode de mise en œuvre présentée dans cet article est une méthode de mise en œuvre relativement basique. Pour différents besoins, elle doit être ajustée en conséquence en fonction de la situation réelle.

Bien sûr, il existe déjà des bibliothèques tierces relativement matures qui peuvent être utilisées pour implémenter des menus en cascade illimités, telles que jQuery et Vue.js, qui peuvent implémenter cette fonction plus facilement. Cependant, nous devons toujours comprendre comment utiliser ces bibliothèques sur la base de la maîtrise des principes, afin de pouvoir utiliser ces outils avec plus de flexibilité pour accomplir diverses tâches complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript json jquery vue.js html select 标识符递归循环 JS 对象事件 dom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser JavaScript pour obtenir un effet carrousel d'imagesArticle suivant：Utiliser JavaScript pour obtenir un effet carrousel d'images

Articles Liés

Voir plus