CODEWITHSUNDEEP
jquery
Andy
Andy

Reputation: 3021

Fadein class based on select option

I have this code which seems to work well, all i need to do is fade out the image that is currently in the div as in my code below, which works $('.desrarea .images img').fadeOut(); and then fade in the image with the correct class based on the option value, which is the bit im struggling with..

$('#regionselect').change(function(){
        var selected = $(this).find(':selected');
        $('.regionDetail').fadeOut();
        $('.desrarea .images img').fadeOut();
        var count = $('.countrylist').length;
        $('.countrylist').slideUp(function(){
            if(!--count) {
               $('.'+selected).slideDown();
            }       
        });
    });


<select id="regionselect" class=" outtaHere">                                                          
    <option value="australia_new_zealand_holidays"> Australasia</option>                                                              
    <option value="central_america_and_caribbean"> Central America &amp; the Caribbean</option>       
    <option value="europe"> Europe</option>                                                   
    <option value="indian_subcontinent_holidays"> Indian Subcontinent</option>                             
    <option value="north_central_asia"> North &amp; Central Asia</option>     
    <option value="north_africa_middle_east"> North Africa &amp; Middle East</option>     
    <option value="north_america"> North America</option> 
    <option value="polar_regions"> Polar Regions</option>             
    <option value="south_america"> South America</option>             
    <option value="south_east_asia"> South East Asia</option>             
    <option value="sub_saharan_africa"> Sub Saharan Africa</option>           
</select>

Upvotes: 1

Views: 1480

Answers (2)

Romain Guidoux
Romain Guidoux

Reputation: 2971

Like James, I'm not sure I understand your question. Is this what you want ?

$(function() {
    $('#regionselect').change(function(){
        var selectedValue = $(this).val();

        $('.desrarea .images img').fadeOut();
        $('.desrarea .images img.' + selectedValue).fadeIn();
    });
});

When the selected value changes, it fades out the image in the div and then fade in the image which has the class designated by the selected option.

Upvotes: 2

James Allardice
James Allardice

Reputation: 166021

I'm not entirely clear on what you want to do, but I think you want to get the value of the selected option in your regionselect select element, which you can do with

$("#regionselect option:selected").val();

Once you have the value of the selected option, you can load the image associated with that value.

Upvotes: 0

Related Questions