CODEWITHSUNDEEP
jquery
tbar
tbar

Reputation: 7

Hide div when select option changes

I am trying to have a div display until the select option changes, right now the div will only display once I change the select to option 2, then back to option 1. Here are my code snippets

<select id="selectchange" name="id">
    <option class="1">Show by default</option>
    <option class="2">Hidden</option>
</select>

and

$("#selectchange").change(function () {
    var selectBox = $("#selectchange");
    var selected = $("#selectchange option:selected");

    if( selected.attr("class") == '1' )
    {
        var optionPrice = $('option:selected', this).attr('data-price');
        var optionPriceSale = $('option:selected', this).attr('data-price-sale');
        $('.showthistext').show();
        $('[itemprop="price"] .money').text( optionPrice );
            {% if variant.compare_at_price > variant.price %} 
        $('.was_price .money').text( optionPriceSale ); 
            {% endif %}
    }
    else if ( selected.attr("class") == '2' )
    {
        var optionPrice = $('option:selected', this).attr('data-price');
        var optionPriceSale = $('option:selected', this).attr('data-price-sale');

        $('.showthistext').hide();
        $('[itemprop="price"] .money').text( optionPrice );
            {% if variant.compare_at_price > variant.price %} $('.was_price .money').text( optionPriceSale );
            {% endif %}
    }
    else {
        console.log('Invalid Option');
    }  
});

Upvotes: 0

Views: 48

Answers (2)

synz
synz

Reputation: 573

Maybe this is what are you looking for Example Code below: 

$("#selectchange").on("change",function(){
    var optClass    = $("option:selected", this).attr("class");
    var showthis    = $(".showthistext");

    if(optClass == 1){
        showthis.show();
    }else{
        showthis.hide();
    }
});

Jsfiddle : https://jsfiddle.net/synz/18v1h6gu/

Upvotes: 1

hackdotslashdotkill
hackdotslashdotkill

Reputation: 40

Just make a class that is called hidden and assign it opacity =0 and visibility =false.

Then just use jquery to assign and remove the class based on the option selection....

.hidden{
    Opacity:0;
    Visibility:false;
}

$('div').addClass('.hidden');

$('div').removeClass('.hidden');

Sorry if formatting is a little weird looking I'm on my phone.

Upvotes: 0

Related Questions