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.