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>

1 Answers

1
Community On Best Solutions

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