Add DIV removed in jQuery

Asked

Viewed 32 times

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 select of options is 2 or 3, I remove the Divs in question, as I do to ADD the Divs again, if the option is option 1? Without being duplicated or something in this sense??

jquery

  • Have you ever tested .remove() use .hide() and .show()?

  • If you need to switch, maybe it’s better to just hide instead of remove.

  • It’s an option! I’ll test! :)

  • Just, solved my problem, thank you!

  • 1

    @Great Andrébaill. I put together an answer with the most compressed code.

2 answers

2


I think you could compress the code and use something like that, just with 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';
    });
});

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

Or else using jQuery, where as a general rule it is used .hide() and .show() in time 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');
});

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

1

I leave here the answer, as commented by the staff, in case someone needs!

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

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.