Tutoriel sur la mise en œuvre efficace de la commutation dynamique du contenu des menus déroulants à l'aide de JavaScript

Ce didacticiel vise à vous guider sur la façon d'utiliser JavaScript et du HTML/CSS concis pour implémenter une fonction de changement de menu déroulant dynamique. Lorsque l'utilisateur effectue une sélection dans le menu déroulant principal, le contenu du sous-menu correspondant sera mis à jour et affiché en temps réel, tout en garantissant qu'un seul sous-menu est affiché, améliorant ainsi l'expérience utilisateur et la maintenabilité du code.

Dans les applications Web modernes, il est courant d’afficher dynamiquement différents contenus en fonction des sélections des utilisateurs. Par exemple, dans un formulaire, différentes sous-options sont affichées en fonction de la catégorie sélectionnée par l'utilisateur. L'approche traditionnelle peut consister à pré-créer des éléments HTML indépendants pour chaque option, puis à contrôler leur affichage et leur masquage via JavaScript. Cependant, lorsque le nombre d’options augmente, cette approche conduit à des structures DOM redondantes et la logique JavaScript devient complexe et difficile à maintenir. Ce didacticiel présentera une solution plus efficace et plus élégante pour obtenir une commutation flexible du contenu du menu déroulant via un élément d'espace réservé commun et une gestion dynamique des données JavaScript.

Idées de mise en œuvre de base

L'idée principale de cette solution est la suivante : au lieu de créer des éléments HTML distincts pour chaque sous-menu possible, créez simplement un élément d'espace réservé générique. Lorsque la sélection dans le menu principal change, JavaScript mettra à jour dynamiquement l'étiquette et les options de cet élément d'espace réservé en fonction de la valeur sélectionnée et contrôlera son état d'affichage. Cette approche simplifie grandement la structure HTML et améliore la maintenabilité du code JavaScript.

Conception de structures HTML

Tout d’abord, nous devons définir le menu déroulant principal et un espace réservé générique pour afficher le contenu dynamique.

 <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>
  <tr class="noDisplay">
    <td>
      étiquette>
      <s>
        <option value="" selected d>Sélectionner-</option>
      </s>électionner>
    </td>
  </tr>
</tableau>

Description de la structure :

• Menu déroulant principal (#abcid) : Responsable du déclenchement des événements de commutation. L'option désactivée sélectionnée value="" agit comme une invite par défaut pour empêcher l'utilisateur de la sélectionner.
• Ligne de sous-menu générique () : Il s'agit de l'espace réservé de clé.
  • Il est initialement livré avec la classe noDisplay, qui est masquée via CSS.
  • Contient un élément vide en interne, qui est utilisé pour afficher dynamiquement le titre du sous-menu.
  • Contient un élément vide en interne pour remplir dynamiquement les options. De même, value="" sélectionné désactivé comme invite par défaut.

  Définition du style CSS

  Afin d'obtenir un masquage initial et un affichage dynamique, nous avons besoin d'une simple classe CSS.

   .noDisplay {
    affichage : aucun ;
  }

  Description du modèle :

  • La classe .noDisplay définit la propriété display de l'élément sur none, le rendant invisible sur la page et n'occupant aucun espace.

  Implémentation de la logique JavaScript

  JavaScript est au cœur de la commutation dynamique. Il est chargé de surveiller les modifications dans le menu principal et de mettre à jour le contenu du sous-menu en fonction des modifications.

   const
    selectABC = document.querySelector('#abcid'), // Récupère le menu déroulant principal trSelect2 = document.querySelector('tr.noDisplay'), // Récupère la ligne d'espace réservé du sous-menu label_2 = trSelect2.querySelector('label'), // Récupère l'élément label du sous-menu select_2 = trSelect2.querySelector('select'), // Récupère le élément de menu déroulant du sous-menu // Définir les données dans différentes situations de sélection selCases = {
      A : { label : 'Aaa', sels:[ {k : '1', v:'Alex' }, {k : '2', v:'Jack' } ] },
      B : { label : 'Bbb', sels:[ {k : 'w', v:'US' }, {k : 'x', v:'Australie' }, {k : 'y', v:'Inde' } ] },
      C : { label : 'Ccc', sels :[ {k : '$', v:'Bleu' }, {k : '£', v:'Vert' }, {k : '§', v:'Rouge' } ] }
    } ;
  
  // Écoute l'événement change du menu déroulant principal selectABC.onchange = e => {
    // Efface toutes les options dans le sous-menu déroulant, ne laissant que la première option par défaut select_2.length = 1;
    //Réinitialise l'état sélectionné du sous-menu déroulant à la première option par défaut select_2.selectedIndex = 0;
  
    // Mise à jour du texte de l'étiquette du sous-menu en fonction de la valeur de sélection du menu principal // selectABC.value correspond à 'A', 'B', 'C'
    label_2.textContent = selCases[selectABC.value].label;
  
    // Parcourez les données correspondantes et ajoutez dynamiquement de nouvelles options au sous-menu déroulant selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) );
  
    // Supprime la classe .noDisplay et rend le sous-menu visible trSelect2.classList.remove('noDisplay');
  } ;

  Explication détaillée du code JavaScript :

  1. Acquisition d'éléments DOM :
     • selectABC : obtenez le menu déroulant principal avec l'ID abcid.
     • trSelect2 : récupère l'élément avec la classe noDisplay, qui est le conteneur du sous-menu.
     • label_2 : récupérez l'élément dans trSelect2.
     • select_2 : récupère l'élément dans trSelect2.
     • Structure des données (selCases) :
       • Il s'agit d'un objet JavaScript utilisé pour stocker les données correspondant aux différentes options du menu principal (« A », « B », « C »).
       • Chaque clé (telle que 'A') correspond à un objet, contenant :
         • label : Le texte du titre du sous-menu.
         • sels : Un tableau contenant les données d’option du sous-menu. Chaque option est un objet {k : 'value', v : 'text'}, k est la valeur réelle de l'option (attribut value) et v est le texte affiché.
       • Cette structure rend la gestion des données claire et facile à étendre.
     • Écoute d'événements (selectABC.onchange) :
       • Lorsque la valeur de selectABC change, l'événement onchange est déclenché et la logique de la fonction de flèche est exécutée.
     • Logique de mise à jour dynamique :
       • select_2.length = 1; : C'est une manière intéressante d'effacer les options du menu déroulant. Il définira le nombre d'options dans le menu déroulant sur 1, ce qui conservera uniquement la première option (par défaut "Sélectionner-") et supprimera toutes les options suivantes.
       • select_2.selectedIndex = 0; : garantit que la sous-liste déroulante est réinitialisée à la première option par défaut après chaque mise à jour pour éviter de conserver la dernière valeur sélectionnée.
       • label_2.textContent = selCases[selectABC.value].label; : selon la valeur de sélection actuelle (selectABC.value) du menu principal, supprimez l'étiquette correspondante de l'objet selCases et mettez à jour le texte de l'étiquette du sous-menu.
       • selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) ); : Parcourez le tableau d'options du sous-menu correspondant dans selCases. Pour chaque paire {k, v}, créez un nouvel objet Option (new Option(text, value)) et ajoutez-le à select_2.
       • trSelect2.classList.remove('noDisplay'); : Enfin, supprimez la classe noDisplay du conteneur de sous-menu pour la rendre visible.

     Avantages et considérations

     Avantages :

     • Structure HTML concise : évitez de créer beaucoup de HTML répété pour chaque sous-menu, et la structure DOM est plus claire.
     • Fonctionnement DOM efficace : n'utilisez qu'un élément de sous-menu commun au lieu de créer et de détruire plusieurs éléments à plusieurs reprises, ce qui entraîne de meilleures performances.
     • Facile à maintenir et à étendre : Toutes les données des sous-menus sont concentrées dans l'objet selCases de JavaScript. Pour modifier ou ajouter de nouvelles options, il vous suffit de mettre à jour cette structure de données sans modifier le HTML.
     • Meilleure expérience utilisateur : seuls les éléments nécessaires sont rendus lors du chargement de la page et le contenu dynamique est chargé à la demande.

     Choses à noter :

     • Source de données : dans les applications pratiques, les données des selCases seront généralement obtenues à partir de l'API back-end via des requêtes AJAX, plutôt que d'être codées en dur en JavaScript.
     • État initial : assurez-vous que le sous-menu est masqué lors du chargement de la page et que le menu principal dispose d'une option par défaut "Veuillez sélectionner".
     • Soumission du formulaire : Si la valeur de ce sous-menu dynamique doit être soumise au serveur, veuillez vous assurer que la valeur actuelle de select_2 peut être correctement obtenue lors de la soumission du formulaire.
     • Accessibilité : envisagez d'ajouter des attributs ARIA appropriés au contenu dynamique pour améliorer l'accessibilité.

     Résumer

     Grâce à la méthode présentée dans ce didacticiel, vous pouvez utiliser du JavaScript, du HTML et du CSS concis pour implémenter une fonction de commutation de menu déroulant dynamique efficace et facile à maintenir. Ce mode est très utile lorsqu'il s'agit de formulaires dynamiques et d'interfaces interactives reposant sur des sélections. Cela optimise non seulement la structure du code, mais améliore également l'expérience utilisateur. La maîtrise de cette technologie vous aidera à créer des applications Web plus puissantes et plus flexibles.

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!