Tutoriel de mise en œuvre du menu déroulant en cascade dynamique JavaScript

Ce didacticiel explique comment implémenter efficacement des menus déroulants dynamiques en cascade à l'aide de JavaScript. En construisant une logique basée sur les données, nous pouvons mettre à jour et afficher dynamiquement le contenu du sous-menu déroulant correspondant en fonction de la sélection de l'utilisateur dans un menu déroulant principal. Cette méthode évite les opérations DOM complexes, améliore la maintenabilité du code et l'expérience utilisateur et constitue une solution idéale pour créer des formulaires interactifs.

introduction

Dans le développement Web, les menus déroulants dynamiques en cascade sont une exigence courante, comme l'affichage de la ville correspondante après la sélection d'un pays, ou l'affichage d'un modèle spécifique après la sélection d'une catégorie de produits. Traditionnellement, les développeurs peuvent créer des éléments HTML distincts pour chaque sous-menu possible et les masquer ou les afficher explicitement via JavaScript, ou même remplacer des fragments HTML entiers directement via innerHTML. Cependant, cette approche entraîne souvent un code redondant, des difficultés de maintenance et peut avoir un impact sur les performances des pages en cas d'utilisation fréquente. Ce didacticiel présente une solution plus élégante et plus efficace qui réalise cette fonctionnalité grâce à une manipulation DOM rationalisée et basée sur les données.

idée de base

L'idée centrale de ce tutoriel est :

1. Conteneur dynamique unique : au lieu de créer un conteneur HTML distinct pour chaque sous-menu possible, utilisez un conteneur commun (tel qu'un ou un
   ) dont le contenu est mis à jour dynamiquement en fonction de la sélection du menu principal.
2. Basé sur les données : toutes les données des options de sous-menu sont stockées de manière centralisée dans un objet JavaScript pour une gestion et un accès faciles.
3. Fonctionnement DOM efficace : lorsque l'option du menu principal change, effacez l'ancien contenu du conteneur dynamique, puis créez et ajoutez par programme de nouvelles options basées sur la structure de données prédéfinie au lieu de remplacer la chaîne HTML entière.
4. Contrôle CSS de l'affichage : utilisez une classe CSS pour contrôler l'état caché initial d'un conteneur dynamique, et supprimez ou ajoutez la classe via JavaScript pour contrôler l'affichage si nécessaire.

Conception de structures HTML

Tout d’abord, nous devons définir la structure HTML de la page. Il contiendra un menu déroulant principal et un espace réservé pour afficher des sous-menus dynamiques.

 <tableau>
  <tr>
    <td>
      <label>ABC :</label>
      <select id="abcid">
        <option value="" selected d>Sélectionner-</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      électionner>
    </select>
</td>
  </tr>
  <!-- Espace réservé pour le sous-menu dynamique -->
  <tr class="noDisplay">
    <td>
      étiquette>
      <s>
        <option value="" selected d>Sélectionner-</option>
      </s>électionner>
    </td>
  </tr>
</tableau>

Description de la structure :

• #abcid : Il s'agit de notre menu déroulant principal, dans lequel l'utilisateur sélectionnera A, B ou C.
•  : Il s'agit d'une ligne d'espace réservé clé. Il est initialement masqué par la classe noDisplay. Il contient un élément vide et un élément vide à l'intérieur, qui seront remplis et mis à jour dynamiquement en JavaScript en fonction de la sélection du menu principal.

  Définition du style CSS

  Afin d'obtenir l'effet de masquage initial et d'affichage ultérieur, nous avons besoin d'une règle CSS simple.

   .noDisplay {
    affichage : aucun ; /* Masquer l'élément initialement */
  }

  Lorsque l'élément tr a la classe noDisplay, il ne sera pas affiché sur la page. Lorsque nous avons besoin de l'afficher, nous pouvons supprimer cette classe via JavaScript.

  Logique de base JavaScript

  La partie JavaScript est chargée de surveiller les modifications dans le menu déroulant principal et de mettre à jour dynamiquement le contenu du sous-menu en fonction des sélections.

   // Récupère l'élément DOM requis const selectABC = document.querySelector('#abcid'); // Menu déroulant principal const trSelect2 = document.querySelector('tr.noDisplay'); // Ligne de conteneur du sous-menu dynamique const label_2 = trSelect2.querySelector('label'); // Libellé du sous-menu dynamique const select_2 = trSelect2.querySelector('select'); // Le sous-menu dynamique lui-même // Définit la structure de données des options du sous-menu const selCases = {
    UN: {
      étiquette : 'Option A',
      sels : [{
        k : '1',
        v: 'Alex'
      }, {
        k : '2',
        v : « Jack »
      }]
    },
    B : {
      étiquette : 'Option B',
      sels : [{
        k : 'w',
        v : « États-Unis »
      }, {
        k : 'x',
        v : « Australie »
      }, {
        k : 'y',
        v : « Inde »
      }]
    },
    C : {
      étiquette : 'Option C',
      sels : [{
        k : '$',
        v : 'Bleu'
      }, {
        k : '£',
        v : « Vert »
      }, {
        k : '§',
        v : 'Rouge'
      }]
    }
  } ;
  
  // Écoute l'événement change du menu déroulant principal selectABC.onchange = e => {
    // 1. Effacez les options existantes du sous-menu dynamique // Conservez la première option par défaut "Select-" et effacez-la à partir de l'index 1 select_2.length = 1;
    select_2.selectedIndex = 0 ; //Réinitialiser les éléments sélectionnés par défaut //Obtenir la valeur actuellement sélectionnée dans le menu principal (A, B ou C)
    const selectedValue = selectABC.value;
  
    // Assurez-vous qu'une option valide est sélectionnée (pas la valeur nulle "Select-" par défaut)
    if (selectedValue && selCases[selectedValue]) {
      // 2. Mettre à jour le texte de l'étiquette du sous-menu dynamique label_2.textContent = selCases[selectedValue].label;
  
      // 3. Parcourez les données et ajoutez de nouvelles options selCases[selectedValue].sels.forEach(({
        k,
        v
      }) => {
        select_2.add(nouvelle option(v, k));
      });
  
      // 4. Afficher le conteneur de sous-menu dynamique trSelect2.classList.remove('noDisplay');
    } autre {
      // Si l'élément par défaut ou l'élément non valide est sélectionné, masquez le sous-menu trSelect2.classList.add('noDisplay');
    }
  } ;

  Analyse des codes :

  1. Obtenez les éléments DOM : utilisez document.querySelector pour obtenir le menu déroulant principal (#abcid) et la ligne du conteneur (.noDisplay) du sous-menu dynamique et ses éléments internes et
  .
• Structure de données selCases : il s'agit d'un objet JavaScript avec la valeur du menu principal (A, B, C) comme clé. Chaque clé correspond à un objet, comprenant :
  • label : Le texte de l’étiquette d’affichage du sous-menu.
  • sels : Un tableau contenant les options réelles du sous-menu. Chaque option est un objet avec les attributs k (valeur) et v (texte). Cette structure rend la gestion des données claire et facile à étendre.
• Gestion des événements selectABC.onchange :
  • select_2.length = 1; : c'est un moyen efficace d'effacer les options du menu déroulant. Il définit le nombre d'options du menu déroulant sur 1, supprimant toutes sauf la première (généralement "Sélectionner-" ou la valeur par défaut).
  • select_2.selectedIndex = 0; : Réinitialise l'élément sélectionné du sous-menu au premier.
  • label_2.textContent = selCases[selectedValue].label; : met à jour le texte de l'étiquette devant le sous-menu en fonction de la sélection dans le menu principal.
  • selCases[selectedValue].sels.forEach(...) : parcourez le tableau de sous-options correspondant à l'option du menu principal dans selCases.
  • select_2.add(new Option(v, k)); : Créez un nouvel élément pour chaque sous-option et ajoutez-le au sous-menu. new Option(text, value) est un moyen pratique de créer des options.
  • trSelect2.classList.remove('noDisplay'); : supprime la classe noDisplay pour afficher le conteneur de sous-menu dynamique.
  • Gérer l'état initial ou la sélection invalide : masquez le conteneur de sous-menu si la sélection du menu principal est la valeur vide par défaut.

Points à noter et bonnes pratiques

1. Gestion centralisée des données : il est recommandé de stocker toutes les données d'options dynamiques dans un objet JavaScript. Cela rend le code plus lisible, plus facile à maintenir et facilite l'extension ou le chargement ultérieur de données à partir de l'API backend.
2. Évitez les abus d'innerHTML : l'utilisation fréquente d'innerHTML pour remplacer de grandes sections de HTML entraînera une réanalyse et un rendu du DOM par le navigateur, affectant ainsi les performances. Ce didacticiel utilise new Option() et select.add() pour faire fonctionner avec précision l'élément , ce qui est plus efficace.
3. Mise en cache des éléments DOM : obtenez et mettez en cache les références aux éléments DOM (tels que selectABC, trSelect2) au début du script pour éviter d'interroger à plusieurs reprises le DOM dans la fonction de traitement d'événements et améliorer les performances.
4. Traitement de l'état initial : assurez-vous que le sous-menu dynamique est dans le bon état masqué lorsque la page est chargée. Ce didacticiel est implémenté via la classe .noDisplay de CSS et le jugement conditionnel en JavaScript.
5. Expérience utilisateur : lorsque le menu principal change, l'effacement et la réinitialisation de l'état sélectionné du sous-menu peuvent empêcher les utilisateurs de voir des options anciennes ou non pertinentes.
6. Accessibilité : assurez-vous de fournir un texte significatif pour les éléments et envisagez d'ajouter aria-labelledby ou d'autres attributs ARIA aux éléments de sélection générés dynamiquement pour améliorer l'accessibilité.
7. Soumission du formulaire : lorsque le formulaire est soumis, vous obtiendrez la valeur sélectionnée par l'utilisateur dans selectABC et select_2.

Résumer

Grâce aux méthodes présentées dans ce didacticiel, nous avons réussi à implémenter un menu déroulant en cascade dynamique efficace, maintenable et convivial. L'essentiel est d'adopter une stratégie basée sur les données et d'utiliser des opérations DOM rationalisées et des classes CSS pour contrôler l'affichage et le masquage des éléments. Cette méthode optimise non seulement la structure du code et améliore les performances des pages, mais établit également une base solide pour créer des formulaires interactifs plus complexes.