Variable scope issue

Variable scope issue

Hi, I am a real newbie to jQuery and am struggling with trying to get a small piece of code to function correctly. I basically have four select boxes (ids = #style, #type, #color, #uses) that I need to build a string from the selected options. The output string will be used to show/hide a list where each <li> item will have a css class defined with names from the four selection boxes, e.g.
 
<li class="all sel1opt3 sel2opt5 sel3opt1 sel4opt2"></li>
 
I have the following jQuery code:
 
$(function() {
 var styles = '.all';
 var types  = '.all';
 var colors = '.all';
 var uses   = '.all';


 var gallery = $('li', 'ul#gallery');
 
$("#styles").change(function(){ 
      $("option:selected", $(this)).each(function(){ 
            styles = '.'+$(this).val();
      });
});
 
$("#types").change(function(){
      $("option:selected", $(this)).each(function(){
            types = '.'+$(this).val();
      });
});
 
$("#colors").change(function(){
      $("option:selected", $(this)).each(function(){
            colors = '.'+$(this).val();





      });
});
 
$("#uses").change(function(){
      $("option:selected", $(this)).each(function(){
            uses = '.'+$(this).val();
      });
 });



 
// DEBUG CODE 
$('#main').html('<p>class="'+styles+' '+types+' '+colors+' '+uses+'"</p>');
});
 
The problem is that the variables style, type, color, and uses never change outside of their respective change event handlers; within the change event functions the variable get updated with the correct value.
 
I really don't understand why this is not working; from what I have read the variables should be accessible outside of the event handler functions. Any help would be really appreciated.