1

Elaborei a seguinte condição:

jQuery:

$( "#selectOption" ).click(function() {
    var option = $( "#selectOption option:selected" ).val();
    if(option!='escolha'){
        if(option==2){
            $( "#atendimento_a" ).remove(); 
            $( "#locais_de_atendimento" ).remove(); 
            $( "#dias_de_atendimento" ).remove();
        }

        if(option==3){
            $( "#atendimento_a" ).remove(); 
            $( "#locais_de_atendimento" ).remove(); 
            $( "#dias_de_atendimento" ).remove();
            $( "#eu_adoro" ).remove();                  
        }
    } 
});

Form:

<select id="selectOption" name="selectOption">
    <option>escolha</option>
    <option value="1">destaque</option>
    <option value="2">mini</option>
    <option value="3">free</option>
</select>

Caso o retorno do select de opções for 2 ou 3, removo as divs em questão, como eu faço para ADICIONAR novamente as divs, caso a opção seja a opção 1? Sem que fique duplicado ou algo neste sentido??

5
  • Já testaste em vêz de .remove() usar .hide() e .show()?
    – Sergio
    Commented 26/04/2016 às 21:01
  • Se precisa alternar, talvez seja melhor só esconder em vez de remover.
    – Largato
    Commented 26/04/2016 às 21:01
  • É uma opção! Vou testar! :) Commented 26/04/2016 às 21:02
  • Justo, resolveu meu problema, obrigado! Commented 26/04/2016 às 21:03
  • 1
    @AndréBaill ótimo. Juntei uma resposta com o código mais comprimido.
    – Sergio
    Commented 26/04/2016 às 21:24

2 Respostas 2

2

Acho que podias comprimir o código e usar algo assim, só com JavaScript nativo:

var elementos = ["atendimento_a", "locais_de_atendimento", "dias_de_atendimento", "eu_adoro"].map(document.getElementById.bind(document));
document.getElementById("selectOption").addEventListener('change', function() {
    var value = this.value;
    elementos.forEach(function(el) {
        if (el.id == 'eu_adoro') el.style.display = value == '3' ? 'none' : 'bloxk';
        else el.style.display = value == '1' ? 'block' : 'none';
    });
});

https://jsfiddle.net/9Leghjpq/1

Ou então usando jQuery, ondeem regra geral usa-se .hide() e .show() em vêz de .remove():

$("#selectOption").change(function() {
    var value = this.value;
    $("#atendimento_a").toggle(value == '1');
    $("#locais_de_atendimento").toggle(value == '1');
    $("#dias_de_atendimento").toggle(value == '1');
    $("#eu_adoro").toggle(value == '1' || value == '2');
});

https://jsfiddle.net/9Leghjpq/2

1

Deixo aqui a resposta, conforme comentada pelo pessoal, caso alguém precise!

<select id="selectOption" name="selectOption">
    <option>escolha</option>
    <option value="1">destaque</option>
    <option value="2">mini</option>
    <option value="3">free</option>
</select>


$( "#selectOption" ).click(function() {
    var option = $( "#selectOption option:selected" ).val();
    if(option!='escolha'){

        if(option==1){
            $( "#atendimento_a" ).show();   
            $( "#locais_de_atendimento" ).show();   
            $( "#dias_de_atendimento" ).show();
            $( "#eu_adoro" ).show();                    
        }

        if(option==2){
            $( "#atendimento_a" ).hide();   
            $( "#locais_de_atendimento" ).hide();   
            $( "#dias_de_atendimento" ).hide();
        }

        if(option==3){
            $( "#atendimento_a" ).hide();   
            $( "#locais_de_atendimento" ).hide();   
            $( "#dias_de_atendimento" ).hide();
            $( "#eu_adoro" ).hide();                    
        }
    } 
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .