开发者

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 A开发者_Python百科merica &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>


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜