Question

I am trying to update content within divs based on a select box option.

If selected the id of the option should be used to display or hide the appropriate divs witin the area.

<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>

All should be hidden unless one of the above is selected:

<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>

At the same time as the select box is chosen i need to update the following div with the value also like so:

<div class="desrarea optionvalue"> 

Answer 1

Try this

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

With pretty animations:

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