我正在编写一个动态表单，用作订购T恤和连帽衫，坦克等的订单。
表格如何运作
1 - 您首先选择＆＃34;服装类型＆＃34;你喜欢：T恤，连帽衫，坦克或长袖。然后生成＆＃34; Garment Style＆＃34;列表。
2 - 然后选择＆＃34; Garment Style＆＃34;你喜欢：Gildan 5000，Tultex 0202TC等。然后生成该特定服装的可用颜色列表。
3 - 然后你选择你的颜色就结束了。
问题
当您选择＆＃34;服装类型＆＃34;它显示了DIV，它可以保存表单信息，为您提供颜色选项。但是，当您选择另一个＆＃34; Garment Type＆＃34;时，它不会隐藏前一个DIV并将其替换为新的Garment Type的颜色选项，而是在之前的颜色选项下生成新的DIV。
这很难解释，但我已经包含了下面的代码，所以你可以自己看看！
感谢所有的帮助，谢谢！
更新：我已将代码放入JSFiddle：http://jsfiddle.net/oym3ondo/
首先选择T恤。然后选择gildan 5000.然后选择Gildan 2000，依此类推。它将继续创建颜色菜单，而不是替换现有颜色菜单。
<!--DYNAMIC FORM SCRIPT -->
<script type="text/javascript">
// Place in this array the ID of the element you want to hide
var hide=['T-Shirts','Hoodies','Tanks','Long-Sleeves','Gildan_5000','Gildan_2000','Gildan_64000','Gildan_5000L','Tultex_Uni_0202TC','Tultex_Ladies_0213TC','AA_Uni_2001','AA_Ladies_2102','Anvil_980','Gildan_Pull_18500','Gildan_Zip_18600','Tultex_Pull_0320TC','Tultex_Zip_0331TC','Gildan_2200_Tank','Tultex_Uni_Tank','Tultex_Ladies_Tank','Anvil_986_Tank','AA_Tank','Gildan_5400_Long_Sleeve','Gildan_18000_Crewneck','Tultex_Raglan'];
function setOpt()
{
resetOpt(); // Call the resetOpt function. Hide some elements in the "hide" array.
for(var i=0,sel=document.getElementsByTagName('select');i<sel.length;i++)
{
sel[i].onchange=function()
{
if(this.parentNode.tagName.toLowerCase()!='div')
resetOpt(); // Hides the elements in "hide" array when the first select element is choosen
try
{
document.getElementById(this.value).style.display='';
}
catch(e){} ; // When the value of the element is not an element ID
}
}
}
window.addEventListener?window.addEventListener('load',setOpt,false):
window.attachEvent('onload',setOpt);
function resetOpt()
{
for(var i=0;i<hide.length;i++)
document.getElementById(hide[i]).style.display='none'; // Hide the elements in "hide" array
}
</script>
</head>
<body>
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<td colspan="4"><center><strong>Shirt/Design Info</strong></center></th>
</tr>
<tr>
<td width="150px" align="right">Select Garment:</td>
<td width="300px" align="left">
<select name="garment" size="1">
<option>Please Select A Garment Type:</option>
<option value="T-Shirts">T-Shirts</option>
<option value="Hoodies">Hoodies</option>
<option value="Tanks">Tanks</option>
<option value="Long-Sleeves">Long Sleeves</option>
</select>
</td>
<td width="150px" align="right">Select Garment Style:</td>
<td width="300px" align="left">
<div id="T-Shirts">
<select name="tshirt_type">
<option>Please Select A T-Shirt Style:</option>
<option value="Gildan_5000">Gildan 5000</option>
<option value="Gildan_2000">Gildan Ultra 2000</option>
<option value="Gildan_64000">Gildan Softstyle 64000</option>
<option value="Gildan_5000L">Gildan Ladies 5000L</option>
<option value="Tultex_Uni_0202TC">Tultex Unisex 0202TC</option>
<option value="Tultex_Ladies_0213TC">Tultex Ladies 0213TC</option>
<option value="AA_Uni_2001">American Apparel 2001</option>
<option value="AA_Ladies_2102">American Apparel Ladies 2102</option>
<option value="Anvil_980">Anvil 980</option>
</select>
</div>
<div id="Hoodies">
<select name="hoodie_type">
<option>Please Select A Hoodie Style:</option>
<option value="Gildan_Pull_18500">Gildan 18500 Pullover Hoodie</option>
<option value="Gildan_Zip_18600">Gildan 18600 Zip Up Hoodie</option>
<option value="Tultex_Pull_0320TC">Tultex 0320TC Pullover Hood</option>
<option value="Tultex_Zip_0331TC">Tultex 0331TC Zipper Hood</option>
</select>
</div>
<div id="Tanks">
<select name="tank_type">
<option>Please Select A Tank Top Style:</option>
<option value="Gildan_2200_Tank">Gildan 2200 Tank</option>
<option value="Tultex_Uni_Tank">Tultex Unisex Tank</option>
<option value="Tultex_Ladies_Tank">Tultex Ladies Racerback Tank</option>
<option value="Anvil_986_Tank">Anvil 986 Tank</option>
<option value="AA_Tank">American Apparel Tank</option>
</select>
</div>
<div id="Long-Sleeves">
<select name="long_sleeve_type">
<option>Please Select A Long Sleeve Style:</option>
<option value="Gildan_5400_Long_Sleeve">Gildan 5400 Long Sleeve Tee</option>
<option value="Gildan_18000_Crewneck">Gildan 18000 Crewneck</option>
<option value="Tultex_Raglan">Tultex Unisex 3/4 Raglan Tee</option>
</select>
</div>
</td>
</tr>
<tr>
<td width="150px" align="right">Select Shirt Color:</td>
<td width="300px" align="left">
<!--T-SHIRT COLORS-->
<div id="Gildan_5000">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Gildan_2000">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Gildan_64000">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Gildan_5000L">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Tultex_Uni_0202TC">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Tultex_Ladies_0213TC">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="AA_Uni_2001">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="AA_Ladies_2102">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Anvil_980">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<!--HOODIE COLORS-->
<div id="Gildan_Pull_18500">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Gildan_Zip_18600">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Tultex_Pull_0320TC">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Tultex_Zip_0331TC">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<!--TANK COLORS-->
<div id="Gildan_2200_Tank">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Tultex_Uni_Tank">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Tultex_Ladies_Tank">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Anvil_986_Tank">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="AA_Tank">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<!--Long Sleeve Colors-->
<div id="Gildan_5400_Long_Sleeve">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Gildan_18000_Crewneck">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
<div id="Tultex_Raglan">
<select name="Garment_Color">
<option>Please Select A Color</option>
<option value="Green" style="background-color:#0F0;">Green</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>
</td>
<td width="150px" align="right">Quantity:</td>
<td width="300px" align="left"><input name="quantity" type="text" size="10" maxlength="4" /></td>
</tr>
</table>
</body>