Problem: This is essentially for a model number decoder. Several selection boxes full of coded information in a left column, decoded items appearing in right column. The 'decoded' divs will only show up when their coded counterparts are selected in the dropdown. The main problem is that I know nothing of Javascript.

I have cobbled together enough stuff to get the "select box 1" to toggle the corresponding div, but have no clue how to get the next in series to toggle the next div.

CSS:
HTML Code:
.col1 {
float:left;
width:300px;
}

.col2{
float:left;
width:200px;
}
Script:
HTML Code:
function show(obj) {
  no = obj.options[obj.selectedIndex].value;
  count = obj.options.length;
  for(i=1;i<=count;i++)
    document.getElementById('Unit'+i).style.display = 'none';
  if(no>0)
    document.getElementById('Unit'+no).style.display = 'block';
}
Body HTML:
HTML Code:
<div class="nomencol1">
<form name="nomenclature">
<!-- select box 1 -->
<p>
<select onChange="show(this)">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</p>
<!-- select box 2 -->
<p>
<select onChange="show(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</p>
</div>

<div class="nomencol2">
<!-- decoded sect 1 -->
<p>
<div id="Unit1" style="display:none">Unit Type 1</div>
<div id="Unit2" style="display:none">Unit Type 2</div>
<div id="Unit3" style="display:none">Unit Type 3</div>
</p>
<!-- decoded sect 2 -->
<p>
<div id="Size1" style="display:none">Small</div>
<div id="Size2" style="display:none">Medium</div>
<div id="Size3" style="display:none">Large</div>
</p>
</div>
There will ultimately be 14 select drop downs, each relating to a set of decoded divs (the final may end up being a set of checkboxes, but I figure the principle is the same for those, right?).

I am going to guess that I'm not defining enough variables or something in the Javascript, but I'm at a total n00b loss, so please be gentle, and thanks in advance!