根據jquery中選擇的下拉ID改變內容

Question

我想基於選擇框選項更新div內的內容。

如果選擇該選項的ID應該用於顯示或隱藏在該區域相應的div。

<select class=" outtaHere"> 
     <option class="selected" 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> 

所有應該被隱藏除非上述被選擇的一個：

<div class="scroll-content"> 
    <ul class="countrylist australia_new_zealand_holidays"> 
    <li><a href="countries/australia-holidays">Australia</a></li> 
    <li><a href="countries/papua-new-guinea-holidays">Papua New Guinea</a></li> 
    <li><a href="countries/new-zealand">New Zealand</a></li> 
    </ul> 
    <ul class="countrylist central_america_and_caribbean"> 
    <li><a href="countries/costa-rica-holidays">Costa Rica</a></li> 
    </ul> 
    <ul class="countrylist europe"> 
    <li><a href="countries/finland-holidays">Finland</a></li> 
    <li><a href="countries/france-adventure-holiday">France</a></li> 
    </ul> 
    <ul class="countrylist indian_subcontinent_holidays"> 
    <li><a href="countries/bhutan-holidays">Bhutan</a></li> 
    <li><a href="countries/india-holidays">India</a></li> 
    <li><a href="countries/nepal-adventure-holidays">Nepal</a></li> 
    <li><a href="countries/sri-lanka-holidays">Sri Lanka</a></li> 
    </ul> 
</div> 

在作爲被選擇的選擇框我需要更新與該值也像這樣下面的div同時：

<div class="desrarea optionvalue"> 

Answer 1

試試這個

http://jsfiddle.net/XfPv7/1/

$('.outtaHere').change(function(){ 
    var selected = $(this).find(':selected'); 
    $('.countrylist').hide(); 


    $('.'+selected.val()).show(); 
    $('.optionvalue').html(selected.html()). 
     attr('class', 'optionvalue '+selected.val()); 
}); 

用漂亮的動畫：

http://jsfiddle.net/faceleg/aKr5w/

$('.outtaHere').change(function(){ 
    var selected = $(this).find(':selected'); 
    $('.optionvalue').fadeOut(function(){ 
     $('.optionvalue').html(selected.html()).fadeIn() 
      .attr('class', 'optionvalue '+selected.val()); 
    }); 
    var count = $('.countrylist').length; 
    $('.countrylist').slideUp(function(){ 
     if(!--count) { 
      $('.'+selected.val()).slideDown(); 
     }  
    }); 
});