[RESOLVED] Multiple Selects with Multiple Div Toggles

**thermanlee** · 02-04-2010 02:02 PM

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!

**JMRKER** · 02-04-2010 02:36 PM

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?

**thermanlee** · 02-04-2010 02:47 PM

No, the select boxes are all independent of one another.
Each select box will have a different number of options…the largest has 31 options.
Descriptions for the dropdown boxes will include unit type, size, configuration, color, control.
As far as submission, it's really unnecessary since it's decoding on the fly. Maybe it'll just pop up a printable page or something.
Thanks for quick response!

**JMRKER** · 02-04-2010 02:58 PM

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!

**thermanlee** · 02-04-2010 03:56 PM

Perfect! I replaced the value+'-' with value+'</br>' because I need it to read vertically (limited on horizontal space). Would it be better to do something with a <p> tag? I ecstatically thank you for your assistance, and mention that you brought up an interesting point in your earlier post.

Regarding making the dropdowns dependent, If I someday wanted to make a couple of them dependent on the choice made in the first box, is that terribly difficult to do?

**JMRKER** · 02-04-2010 04:41 PM

Comments in red below ...

Originally Posted by thermanlee

Perfect! I replaced the value+'-' with value+'</br>' because I need it to read vertically (limited on horizontal space). Would it be better to do something with a <p> tag?

Doesn't matter, as it should be whatever fits your needs.

I ecstatically thank you for your assistance, and mention that you brought up an interesting point in your earlier post.

What point was that?

Regarding making the dropdowns dependent, If I someday wanted to make a couple of them dependent on the choice made in the first box, is that terribly difficult to do?

Sort of depends. Can be easy or hard ... would need to see the requirements.

Anyway, you're most welcome.
Glad I was able to help so far.
Good Luck!

**thermanlee** · 02-04-2010 05:00 PM

The point was that of making them dependent on one another. It may be helpful to allow the user to only have access to certain options. Let me get the rest of this part done, and I'll repost the code in a new thread. Thanks again for all of your help so far!

Thread: [RESOLVED] Multiple Selects with Multiple Div Toggles

Thread Tools

Display

[RESOLVED] Multiple Selects with Multiple Div Toggles

More information please ...

Consider these changes ...

Ok

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions