In it's simplest form, I have 3 form elements, all of which are drop down lists. The 3rd form elements should be based on the logical conditions of the first 2 form elements "combined". I cant get it to work. If I am able to post an example, it should be obvious:

<script type="text/javascript" src="wforms_pack.js"></script>
<script type="text/javascript" src="wforms_core.js"></script>

<style>
.onstate-A { display: block; }
.offstate-A { display: none; }

.onstate-B { display: block; }
.offstate-B { display: none; }

.onstate-1 { display: block; }
.offstate-1 { display: none; }

.onstate-2 { display: block; }
.offstate-2 { display: none; }

.onstate-3 { display: block; }
.offstate-3 { display: none; }
</style>

<form action='' method='POST'>

<label>First Option</label><br />
<select name=''>
<option class='switch-A' value='A' >Option A</option>
<option class='switch-B' value='B' >Option B</option>
</select><br />

<label>Second Option</label><br />
<select name=''>
<option class='switch-1' value='1'>Number 1</option>
<option class='switch-2' value='2'>Number 2</option>
<option class='switch-3' value='3'>Number 3</option>
</select><br />

<div class='offstate-A offstate-1'>
<label>Option A Number 1</label><br />
<select name=''>
<option value='A1'>A 1</option>
</select><br />
</div>

<div class='offstate-A offstate-2'>
<label>Option A Number 2</label><br />
<select name=''>
<option value='A2'>A 2</option>
</select><br />
</div>

<div class='offstate-A offstate-3'>
<label>Option A Number 3</label><br />
<select name=''>
<option value='A3'>A 3</option>
</select><br />
</div>

<div class='offstate-B offstate-1'>
<label>Option B Number 1</label><br />
<select name=''>
<option value='B1'>B 1</option>
</select><br />
</div>

<div class='offstate-B offstate-2'>
<label>Option B Number 2</label><br />
<select name=''>
<option value='B2'>B 2</option>
</select><br />
</div>

<div class='offstate-B offstate-3'>
<label>Option B Number 3</label><br />
<select name=''>
<option value='B3'>B 3</option>
</select><br />
</div>

</form>


Depending on the order of elements in my stylesheet, I can get either the First Option to work, or the Second Option to work. But I cannot get 'both' options to work together. It seems as if your javascript can handle multiple classes no problem as in this example:

<div class='offstate-A offstate-1'>

The problem lies in the order of object in the stylesheet. The above example produces a different result than if the stylesheet is ordered this way:

<style>
.onstate-1 { display: block; }
.offstate-1 { display: none; }

.onstate-2 { display: block; }
.offstate-2 { display: none; }

.onstate-3 { display: block; }
.offstate-3 { display: none; }

.onstate-A { display: block; }
.offstate-A { display: none; }

.onstate-B { display: block; }
.offstate-B { display: none; }
</style>

Thanks