Javascript动态表单重复问题

时间：2014-09-01 23:44:11

标签： javascript html forms

我正在编写一个动态表单，用作订购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>

0 个答案:

没有答案
相关问题
最新问题