Utiliser JavaScript pour implémenter le traitement de menus en cascade infinis-js tutoriel-php.cn

Maison

interface Web

js tutoriel

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 15, 2023 pm 09:09 PM

javascript 处理级联菜单

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>

Copier après la connexion

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

Copier après la connexion

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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

4 Il y a quelques semaines By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7658

Tutoriel CakePHP

1393

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT MINI RÉPONSES DE MOTS CROSS

113

Afficher plus

Related knowledge

Le processus de fonctionnement de l'hôte de service WIN10 occupant trop de CPU Mar 27, 2024 pm 02:41 PM

1. Tout d'abord, nous cliquons avec le bouton droit sur l'espace vide de la barre des tâches et sélectionnons l'option [Gestionnaire des tâches], ou cliquons avec le bouton droit sur le logo de démarrage, puis sélectionnons l'option [Gestionnaire des tâches]. 2. Dans l'interface du Gestionnaire des tâches ouverte, nous cliquons sur l'onglet [Services] à l'extrême droite. 3. Dans l'onglet [Service] ouvert, cliquez sur l'option [Ouvrir le service] ci-dessous. 4. Dans la fenêtre [Services] qui s'ouvre, cliquez avec le bouton droit sur le service [InternetConnectionSharing(ICS)], puis sélectionnez l'option [Propriétés]. 5. Dans la fenêtre des propriétés qui s'ouvre, remplacez [Ouvrir avec] par [Désactivé], cliquez sur [Appliquer] puis cliquez sur [OK]. 6. Cliquez sur le logo Démarrer, puis cliquez sur le bouton d'arrêt, sélectionnez [Redémarrer] et terminez le redémarrage de l'ordinateur.

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Un guide rapide sur la manipulation des fichiers CSV Dec 26, 2023 pm 02:23 PM

Apprenez rapidement à ouvrir et traiter des fichiers au format CSV Avec le développement continu de l'analyse et du traitement des données, le format CSV est devenu l'un des formats de fichiers les plus utilisés. Un fichier CSV est un fichier texte simple et facile à lire avec différents champs de données séparés par des virgules. Que ce soit dans la recherche académique, l'analyse commerciale ou le traitement de données, nous rencontrons souvent des situations où nous devons ouvrir et traiter des fichiers CSV. Le guide suivant vous montrera comment apprendre rapidement à ouvrir et traiter des fichiers au format CSV. Étape 1 : Comprendre le format de fichier CSV. Tout d'abord,

Apprenez à gérer les caractères spéciaux et à convertir les guillemets simples en PHP Mar 27, 2024 pm 12:39 PM

Dans le processus de développement PHP, la gestion des caractères spéciaux est un problème courant, en particulier dans le traitement des chaînes, les caractères spéciaux sont souvent échappés. Parmi eux, la conversion de caractères spéciaux en guillemets simples est une exigence relativement courante, car en PHP, les guillemets simples sont un moyen courant d'encapsuler des chaînes. Dans cet article, nous expliquerons comment gérer les guillemets simples de conversion de caractères spéciaux en PHP et fournirons des exemples de code spécifiques. En PHP, les caractères spéciaux incluent, sans s'y limiter, les guillemets simples ('), les guillemets doubles ("), la barre oblique inverse (), etc. Dans les chaînes

Comment résoudre le problème après l'échec de la mise à niveau de Win7 vers Win10 ? Dec 26, 2023 pm 07:49 PM

Si le système d'exploitation que nous utilisons est Win7, certains amis peuvent ne pas réussir à passer de Win7 à Win10 lors de la mise à niveau. L'éditeur pense que nous pouvons réessayer la mise à jour pour voir si cela peut résoudre le problème. Jetons un coup d'œil à ce que l'éditeur a fait pour plus de détails ~ Que faire si Win7 ne parvient pas à passer à Win10 Méthode 1 : 1. Il est recommandé de télécharger d'abord un pilote pour évaluer si votre ordinateur peut être mis à niveau vers Win10. utilisez le test du pilote après la mise à niveau. Vérifiez s'il y a des anomalies du pilote, puis corrigez-les en un seul clic. Méthode 2 : 1. Supprimez tous les fichiers sous C:\Windows\SoftwareDistribution\Download. 2.win+R exécutez "wuauclt.e

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Comment obtenir facilement le code d'état HTTP en JavaScript Jan 05, 2024 pm 01:37 PM

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service

See all articles