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 & the Caribbean</option>
<option value="europe"> Europe</option>
<option value="indian_subcontinent_holidays"> Indian Subcontinent</option>
<option value="north_central_asia"> North & Central Asia</option>
<option value="north_africa_middle_east"> North Africa & 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 ?
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.