OVERVIEW/BACKGROUND
I have 2 select-lists (#list1 and #list2) each of which trigger show/hide events on divs associated with them.
I am using 2 different switch statements, one for each list + corresponding divs. This is working fine using jquery.
Please see my: Test Page a

PROBLEM
I'd like #list2 to also trigger show/hide events on some of the #list1 divs, but only if the #list1 divs are already shown.
Please see my: Test Page B

It feels like the IF/ELSEIF/ELSE statement in my Test Page B ought to work but doesnt. Which may boil down to a simple syntax issue or a larger structural/conceptual problem.

Any thoughts, comments & improvements are welcome.

I looked through your code (briefly) and your syntax looks ok. What particular block of code were you concerned with?

Also, for reference you should use a switch statement when you are branching on a single variable:

switch(x)
{
     case 1:
           //do something
     break;
     case 2:
           //do something
     break;
     case 3:
           //
     break;
     default:
           //
}

The following if/elseif/else is logically equivalent:

if(x == 1)
{

}
else if(x == 2)
{

}
else if(x == 3)
{

}
else
{
     //default case
}

Either one works fine, but I personally prefer the switch syntax if I have a lot of cases.

sloppy YES. almost on purpose. by over simplifying the HTML elements in my test pages, i reduced the quantity of elements for the js/jquery to bind to. my real working page has many many more elements on which to bind.

in Test Page B, selections within #list2 do not trigger show/hide of #list1 divs. #list2 is triggering show/hide on its own divs, but not to the #list1 divs.

1. Load Test Page B
2. Set #list1 to CELL (#list1 divs show)
3. Cycle thru #list2 options

RESULT:
#list2 options only effect the divs below it.

EXPECT:
for #list2 options to effect its own divs AND certain #list1 divs per IF/ELSEIF/ELSE statement.

this section of your script isn't within an event, so it would never get fired.

        var list_1 = $('#list1 :selected').val();
	var list_2 = $('#list2 :selected').val();

			if	(
				list_1.value == '4' && list_2.value == '0'||
				list_1.value == '4' && list_2.value == '1'
			)
			{
				$("#div2").show();
				$("#div3").hide();
				$("#div4").hide();
			}
			else if	(
				list_1.value == '4' && list_2.value == '2'
			)
			{
				$("#div2").hide();
				$("#div3").show();
				$("#div4").hide();
			}
			else (
				list_1.value == '4' && list_2.value == '3'
			)
			{
				$("#div2").hide();
				$("#div3").hide();
				$("#div4").show();
			}

move this to it's own function and call it from the other onchange events or move it to both of your onchange events.

RESOLVED, which is better then SOLVED cause i learned gobs...

Please see new Test Page E

Cant say specifically what one thing got the page working other than just sleeping on it, then cleaning sh*t up. Well, feels cleaner. I've learned more in past 48 hours then in the 48 weeks prior. So there may be 101 ways to improve & streamline my js/jquery code.

BASICALLY
Created 4x functions, one for each #list2 value.
These functions perform show/hide on whatever div id's
Then called the function from within my #list2 change/switch statement
I put all #list1 divs in a wrapper. change/switch on #list1 only does show/hide on this wrapper.

ONLY QUIRK
In IE (6+7), the event is fired immediately when new list option is selected.
But in FF, the event doesnt occur until that list loses focus.

Which is my homework for tonights pints & headphones. But, any hints on how to get FF to fire on change?