Question

I current have this code that shows/hides content based on a select option.

How can i work into add and remove a class based on whatever the option is selected but without removing the .desarea?

<option value="country1">
<option valye="country2">

<div class="desarea country1">

//Create destination switch
    $('#regionselect').change(function(){
        var selected = $(this).find(':selected');
        $('.regionDetail').fadeOut();
        var count = $('.countrylist').length;
        $('.countrylist').slideUp(function(){
            if(!--count) {
               $('.'+selected.val()).slideDown();
            }       
        });
    });

Answer 1

Is this what you want ?

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

    $('div').removeClass(selectedValue);
});

EDIT
So is this better ? http://jsfiddle.net/pmEVU/2/

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

    $('option', this).each(function() {
        var currentValue = $(this).val();

        if (currentValue == selectedValue)
            $('div').addClass(selectedValue);
        else
            $('div').removeClass(currentValue);
    });
});