CODEWITHSUNDEEP
javascriptjqueryhtml
Ojibix Creatives
Ojibix Creatives

Reputation: 117

How to First Hide Div then Show After Select of option

I have a list of country in select option and there is fee attribute, when we select a country we show the fees in a div.

what we want is when we select any option, it should hide the already shown div for some second and in that time we show preloader and then show it again and when we change the option, it should do it again same.

My Select option is here

<select class="form-control-input" name="from" id="visitorcountry" onclick="removeError(this.id);">

    <option value="" disabled selected>Select your Nationality</option>
    <option data-price="ALB" data-cl="+355" data-fee="60" value="Albania" >Albania</option>
    <option data-price="AND" data-cl="+376" data-fee="60" value="Andorra" >Andorra</option>
    <option data-price="AGO" data-cl="+244" data-fee="60" value="Angola" >Angola</option>
    <option data-price="ATG" data-cl="+1-268" data-fee="60" value="Antigua and Barbuda" >Antigua and Barbuda</option>
    <option data-price="ARG" data-cl="+54" data-fee="0" value="Argentina" >Argentina</option>
    <option data-price="ARM" data-cl="+374" data-fee="60" value="Armenia" >Armenia</option>
    <option data-price="AWB" data-cl="+297" data-fee="60" value="Aruba" >Aruba</option>
    <option data-price="AUS" data-cl="+61" data-fee="60" value="Australia" >Australia</option>
    <option data-price="AUT" data-cl="+43" data-fee="60" value="Austria" >Austria</option>
    <option data-price="AZE" data-cl="+994" data-fee="60" value="Azerbaijan" >Azerbaijan</option>

</select>

this is overlay and price display part

<div class="row" id="totalcostrow" style="display:none;" >         
    Total Cost : USD <span id="totalcost" style="float:none"></span>                                             
</div>


<div class="preloader" style="display:none;" id="overlay"> 
   <img src="../cassets/images/loader.gif" width="32" height="32" class="loader" alt="loader" title="Loader" /> 
</div>

this is script part

<script>

$(function() {
    $("#visitorcountry").change(function(){
        $('#overlay').show().delay(3000).hide("slow");
        var element = $(this);
        var option = $('option:selected', this).attr('data-fee');
        var processing = 39;
        var finalcost = parseInt(option) + parseInt(processing);

        $('#totalcost').html(finalcost);
        $('#totalcostrow').show();

    });
});

</script>

Upvotes: 0

Views: 43

Answers (1)

Paweł Kuffel
Paweł Kuffel

Reputation: 471

In your code, you are never hiding the #totalcostrow div. I would suggest using setTimeout like so:

$(function() {
    $("#visitorcountry").change(function(){
        $('#totalcostrow').hide(); //hide cost info
        var overlay = $('#overlay');  
        var element = $(this);
        overlay.show(); //show preloader
        setTimeout(function(){
            var option = $('option:selected', element).attr('data-fee');
            var processing = 39;
            var finalcost = parseInt(option) + parseInt(processing);
            overlay.hide(); //hide preloader
            $('#totalcost').html(finalcost);
            $('#totalcostrow').show(); //show cost info
        }, 3000);
    });
});

Upvotes: 1

Related Questions