[RESOLVED] Multiple Selects with Multiple Div Toggles
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!
More information please ...
Do the select boxes relate (depend upon) to each other or are they just independent selections to come to a specific model requirement?
How many options per each of the 14 or so drop-down select boxes?
What are the descriptions associated with the different DD boxes?
What's supposed to happen when the information is submitted to somewhere?
:confused:
Consider these changes ...
Try this as a start ...
Code:
<html>
<head>
<title>Model Decoding</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1065745#post1065745
function show(obj) {
var selArray = document.getElementsByTagName('select');
var str = '';
for (var i=0; i<selArray.length; i++) { str += selArray[i].value+'-'; }
// alert(str);
document.getElementById('Units').innerHTML = str;
}
</script>
<style type="text/css">
.col1 {
float:left;
width:300px;
}
.col2{
float:left;
width:200px;
}
</style>
</head>
<body>
<div class="nomencol1">
<form name="nomenclature">
<!-- select box 1 -->
<p>
<select onchange="show(this)">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</p>
<!-- select box 2 -->
<p>
<select onchange="show(this)">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<!-- select box 3 -->
<p>
<select onchange="show(this)">
<option value="">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<!-- select box 4 -->
<p>
<select onchange="show(this)">
<option value="">Select</option>
<option value="i">i</option>
<option value="ii">ii</option>
<option value="iii">iii</option>
<option value="iv">iv</option>
<option value="v">v</option>
</select>
</form>
</p>
</div>
<div class="nomencol2">
<!-- decoded sections -->
<p>
<div id="Units"></div>
</p>
</div>
</body>
</html>
Good Luck!
