Comment Repopuler les Options de Sélection HTML Sans Déclencher l’Événement de Changement avec jQuery

Lorsque vous travaillez avec plusieurs éléments de sélection HTML dans une application web, vous pouvez vous retrouver dans une situation où la sélection d’une option dans un menu déroulant influence les options disponibles dans un autre. Un scénario courant consiste à faire disparaître une option disponible dans une sélection lorsqu’elle est choisie dans une autre. Cependant, faire cela peut involontairement déclencher des événements de changement qui peuvent compliquer votre logique. Dans cet article, nous allons aborder comment repopuler dynamiquement les options de sélection sans déclencher les événements de changement indésirables en utilisant jQuery.

Le Problème

Imaginez que vous avez deux menus déroulants (éléments de sélection) qui sont interdépendants. Vous voulez mettre en place un système où la sélection d’une option dans un menu déroulant supprime cette option du deuxième menu, garantissant que les utilisateurs ne peuvent pas sélectionner la même option dans les deux. Cependant, avec le comportement par défaut de jQuery, le changement des options dans une sélection appelle également l’événement de changement pour cette sélection, ce qui pourrait conduire à un comportement inattendu dans votre application.

Scénario Exemples

Voici une structure HTML simple pour illustrer les menus déroulants :

<select id="one">
  <option value="1">un</option>
  <option value="2">deux</option>
  <option value="3">trois</option>
</select>
<select id="two">
  <option value="1">un</option>
  <option value="2">deux</option>
  <option value="3">trois</option>
</select>

Lorsque vous sélectionnez “un” dans le premier menu déroulant (#one), l’objectif est de retirer “un” du deuxième menu déroulant (#two). Si vous sélectionnez alors “deux” dans #two, le même comportement devrait se produire à l’inverse.

La Solution

Pour éviter de déclencher des événements de changement lors de la repopulation des options dans vos sélections, vous aurez besoin d’une approche en deux étapes : déconnecter temporairement les gestionnaires d’événements et utiliser un drapeau pour déterminer si l’événement de changement doit être traité.

Étape 1 : Modifier la Logique JavaScript

Commencez par configurer vos fonctions jQuery comme suit :

$(function () {
    var $one = $("#one");
    var $two = $("#two");

    var selectOptions = [ 
        $("option", $one).clone(), 
        $("option", $two).clone() 
    ];

    var isChanging = false; // Drapeau pour empêcher le déclenchement des événements de changement

    $one.change(function () {
        if (isChanging) return; // Ignorer si déjà en train de changer
        
        isChanging = true; // Définir le drapeau avant de changer les options
        var selectedValue = $("option:selected", this).val();
        $two.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($two, selectOptions[1]); // Restaurer les options
        isChanging = false; // Réinitialiser le drapeau
    });
    
    $two.change(function () {
        if (isChanging) return; // Ignorer si déjà en train de changer
        
        isChanging = true; // Définir le drapeau avant de changer les options
        var selectedValue = $("option:selected", this).val();
        $one.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($one, selectOptions[0]); // Restaurer les options
        isChanging = false; // Réinitialiser le drapeau
    });

    function repopulateOptions($select, options) {
        options.each(function() {
            if (!$select.find("option[value='" + this.value + "']").length) {
                $select.append(this); // Ajouter uniquement si pas déjà présent
            }
        });
    }
});

Étape 2 : Explication des Composants Clés

• Drapeau isChanging : Ce drapeau booléen garde la trace de si les gestionnaires d’événements doivent être exécutés ou ignorés, empêchant tout déclenchement accidentel d’événements lors de la manipulation des options.
• Fonction de Repositionnement : Cette fonction aide à resynchroniser les sélections en restaurant les options précédemment disponibles, garantissant que l’utilisateur a accès à tous les choix sauf ceux déjà choisis dans l’autre menu déroulant.
• Clonage des Options : Cloner les options originales nous permet de maintenir une référence à tous les choix disponibles, facilitant la gestion de ce qui est affiché.

Conclusion

Gérer des options de sélection interdépendantes peut être délicat, en particulier lorsque l’on vise à éviter les déclenchements d’événements indésirables. En suivant les directives de cet article, vous pouvez mettre en œuvre une expérience utilisateur fluide où les choix de sélection s’ajustent dynamiquement en temps réel sans problèmes associés au déclenchement d’événements. Cette solution protège non seulement contre des comportements inattendus, mais garde également vos options claires et les utilisateurs engagés !

Si vous avez des questions ou souhaitez partager vos propres expériences avec jQuery et les menus déroulants dynamiques, n’hésitez pas à laisser un commentaire ci-dessous !