Como Repopular Opções de Seleção em HTML Sem Acionar o Evento de Mudança com jQuery

Ao trabalhar com múltiplos elementos de seleção em HTML em uma aplicação web, você pode se ver em uma situação onde a seleção de uma opção em um dropdown afeta as opções disponíveis em outro. Um cenário comum é fazer com que uma opção disponível em uma seleção desapareça quando é selecionada em outra. No entanto, fazer isso pode inadvertidamente acionar eventos de mudança que podem complicar sua lógica. Neste post, abordaremos como repopular dinamicamente as opções de seleção sem acionar os indesejados eventos de mudança usando jQuery.

O Problema

Imagine que você tem dois dropdowns (elementos de seleção) que são interdependentes. Você deseja implementar um sistema onde selecionar uma opção em um dropdown remove essa opção do segundo dropdown, garantindo que os usuários não possam selecionar a mesma opção em ambos. No entanto, com o comportamento padrão do jQuery, mudar as opções em uma seleção também chama o evento de mudança para essa seleção, o que pode levar a comportamentos inesperados em sua aplicação.

Cenário de Exemplo

Aqui está uma estrutura HTML simples para ilustrar os dropdowns:

<select id="one">
  <option value="1">um</option>
  <option value="2">dois</option>
  <option value="3">três</option>
</select>
<select id="two">
  <option value="1">um</option>
  <option value="2">dois</option>
  <option value="3">três</option>
</select>

Quando você seleciona “um” no primeiro dropdown (#one), o objetivo é remover “um” do segundo dropdown (#two). Se você então selecionar “dois” do #two, o mesmo comportamento deve ocorrer em reverso.

A Solução

Para evitar acionar eventos de mudança enquanto repopula as opções em suas seleções, você precisará de uma abordagem em duas etapas: desconectar temporariamente os manipuladores de eventos e usar uma flag para determinar se o evento de mudança deve ser processado.

Passo 1: Modificar a Lógica JavaScript

Comece configurando suas funções jQuery da seguinte forma:

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

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

    var isChanging = false; // Flag para evitar acionar eventos de mudança

    $one.change(function () {
        if (isChanging) return; // Ignorar se já estiver mudando
        
        isChanging = true; // Definir flag antes de mudar opções
        var selectedValue = $("option:selected", this).val();
        $two.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($two, selectOptions[1]); // Restaurar opções
        isChanging = false; // Redefinir flag
    });
    
    $two.change(function () {
        if (isChanging) return; // Ignorar se já estiver mudando
        
        isChanging = true; // Definir flag antes de mudar opções
        var selectedValue = $("option:selected", this).val();
        $one.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($one, selectOptions[0]); // Restaurar opções
        isChanging = false; // Redefinir flag
    });

    function repopulateOptions($select, options) {
        options.each(function() {
            if (!$select.find("option[value='" + this.value + "']").length) {
                $select.append(this); // Adicionar apenas se não estiver presente
            }
        });
    }
});

Passo 2: Explicação dos Componentes Chave

• Flag isChanging: Esta flag booleana mantém o controle de se os manipuladores de eventos devem ser executados ou ignorados, prevenindo qualquer acionamento acidental de eventos durante a manipulação de opções.
• Função de Repopulação: Esta função ajuda a ressincronizar as seleções ao restaurar opções previamente disponíveis, garantindo que o usuário tenha acesso a todas as escolhas, a menos que já tenham sido escolhidas no outro dropdown.
• Clonagem de Opções: Clonar as opções originais nos permite manter uma referência a todas as escolhas disponíveis, facilitando o gerenciamento do que é exibido.

Conclusão

Gerenciar opções de seleção interdependentes pode ser complicado, especialmente quando se busca evitar acionamentos indesejados de eventos. Ao seguir as diretrizes deste post, você pode implementar uma experiência do usuário fluida, onde as escolhas de seleção se ajustam dinamicamente em tempo real sem quaisquer problemas associados ao acionamento de eventos. Esta solução não apenas protege contra comportamentos inesperados, mas também mantém suas opções claras e os usuários engajados!

Se você tiver alguma dúvida ou quiser compartilhar suas próprias experiências com jQuery e dropdowns dinâmicos, sinta-se à vontade para deixar um comentário abaixo!