dcasper
12-15-2006, 07:27 PM
1) Script Title: Switch Content Script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm
3) Describe problem:
I'm setting this up to try to build a user-friendly order form. I have a variety of sample products that I would like for users to be able to select out of a dropdown list. Depending on their selection the associated attributes would change. For a single item this seems to work fine, but when I include multiple items it breaks down because of how I am trying to use it. I'm wondering if there's any way to create groupings of ID's that behave together and independant of other groups.
The code attached below will work for a single item, and performs perfectly. Depending on what options is selected out of the dropdown, the corresponding additional column is displayed. When I add an additional item, I can still choose cycle through the dropdowns, but if I choose an option out of the second dropdown it closes the option I had selected out of the first dropdown.
F.Y.I. I'm using Coldfusion to loop through the build of the individual sections, so this is a part of what's generated X number of times. Any help or suggestions would be much appreciated.
Thanks,
--Daniel
Edit: Additionally I guess I just discovered that the code below works fine in IE but does not work in Firefox. I don't get any of my hidden tables to appear at any point.
<TR>
<TD Style="font-weight: bold;">
#ItemNumber#
</TD>
<TD>
d.
</TD>
<TD>
Item Category:
</TD>
<TD>
<SELECT Name=ItemCategory#Item# onChange="expandcontent(this, 'item#Item#sc'+this.selectedIndex)">
<OPTION Value=0></OPTION>
<OPTION Value=1>Pen</OPTION>
<option Value=2>Mug</OPTION>
<OPTION Value=3>Keytag</OPTION>
</SELECT>
</TD>
<TD Id=Item#Item#SC0 class="switchcontent">
</TD>
<TD Id=Item#Item#SC1 class="switchcontent">
<TABLE Style="font-size: 10pt;">
<TR>
<TD>
<INPUT Type="Checkbox" Name="PenBarrelCheck" CHECKED>
</TD>
<TD>
Barrel Color:
</TD>
<TD>
<INPUT Type="Text" Name="PenBarrelText">
</TD>
</TR>
<TR>
<TD>
<INPUT Type="Checkbox" Name="PenTrimCheck">
</TD>
<TD>
Trim Color:
</TD>
<TD>
<INPUT Type="Text" Name="PenTrimText">
</TD>
</TR>
</TABLE>
</TD>
<TD Id=Item#Item#SC2 class="switchcontent">
Test Words SC2
</TD>
<TD Id=Item#Item#SC3 class="switchcontent">
Test Words SC3
</TD>
</TR>
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm
3) Describe problem:
I'm setting this up to try to build a user-friendly order form. I have a variety of sample products that I would like for users to be able to select out of a dropdown list. Depending on their selection the associated attributes would change. For a single item this seems to work fine, but when I include multiple items it breaks down because of how I am trying to use it. I'm wondering if there's any way to create groupings of ID's that behave together and independant of other groups.
The code attached below will work for a single item, and performs perfectly. Depending on what options is selected out of the dropdown, the corresponding additional column is displayed. When I add an additional item, I can still choose cycle through the dropdowns, but if I choose an option out of the second dropdown it closes the option I had selected out of the first dropdown.
F.Y.I. I'm using Coldfusion to loop through the build of the individual sections, so this is a part of what's generated X number of times. Any help or suggestions would be much appreciated.
Thanks,
--Daniel
Edit: Additionally I guess I just discovered that the code below works fine in IE but does not work in Firefox. I don't get any of my hidden tables to appear at any point.
<TR>
<TD Style="font-weight: bold;">
#ItemNumber#
</TD>
<TD>
d.
</TD>
<TD>
Item Category:
</TD>
<TD>
<SELECT Name=ItemCategory#Item# onChange="expandcontent(this, 'item#Item#sc'+this.selectedIndex)">
<OPTION Value=0></OPTION>
<OPTION Value=1>Pen</OPTION>
<option Value=2>Mug</OPTION>
<OPTION Value=3>Keytag</OPTION>
</SELECT>
</TD>
<TD Id=Item#Item#SC0 class="switchcontent">
</TD>
<TD Id=Item#Item#SC1 class="switchcontent">
<TABLE Style="font-size: 10pt;">
<TR>
<TD>
<INPUT Type="Checkbox" Name="PenBarrelCheck" CHECKED>
</TD>
<TD>
Barrel Color:
</TD>
<TD>
<INPUT Type="Text" Name="PenBarrelText">
</TD>
</TR>
<TR>
<TD>
<INPUT Type="Checkbox" Name="PenTrimCheck">
</TD>
<TD>
Trim Color:
</TD>
<TD>
<INPUT Type="Text" Name="PenTrimText">
</TD>
</TR>
</TABLE>
</TD>
<TD Id=Item#Item#SC2 class="switchcontent">
Test Words SC2
</TD>
<TD Id=Item#Item#SC3 class="switchcontent">
Test Words SC3
</TD>
</TR>