Add Removed DIV in jQuery

1

I made the following condition:

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>

If the return of the option select is 2 or 3, I remove the divs in question, how do I add the divs again, if the option is option 1? Without being duplicate or something like this ??

    
asked by anonymous 26.04.2016 / 23:00

2 answers

2

I think you could compress the code and use something like this, with only native JavaScript:

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';
    });
});

link

Or else using jQuery, where as a general rule you use .hide() and .show() instead of .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');
});

link

    
26.04.2016 / 23:04
1

I leave the answer here, as commented by the staff, should anyone need it!

<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();                    
        }
    } 
});
    
26.04.2016 / 23:04