添加新产品时逻辑形式不会令人耳目一新

时间：2013-12-10 14:47:11

标签： javascript jquery html forms

我的表单有问题。你可以在这里看到它：

http://www.rawlinspaints.com/development/form2.html

基本上，表单的目的是让用户可以选择产品，并且只接收该产品的特定选项，但此问题是当用户点击添加新产品时，一旦他们这样做，下拉不再仅仅显示该产品的必要数据。

有人可以帮忙吗？链接上面和代码在这里，或者如果有人有更好的方法来做这将是伟大的，我知道代码是凌乱的我仍然需要整理它，以便表单数据通过某种方式来通过清晰易读！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

<script type='text/javascript'>
$(document).ready(function () {
 $("#product").change(function () {
     var selected = $("#product option:selected").val();
     $('div').hide();
     $('#' + selected).show();

 });
 $('div').hide();
 });
</script>
<script type='text/javascript' src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){


$(function () {
$('table').on('click', 'tr a', function (e) {
    e.preventDefault();
    $(this).parents('tr').remove();
});

$("#addTableRow").click(function() {
    $("#mans").each(function () {
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';
        if ($('tbody', this).length > 0) {
            $('tbody', this).append(tds);
        } else {
            $(this).append(tds);
        }
    });
});
});


}//]]>  

</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" border="1" cellspacing="0" cellpadding="10" id="mans">
    <tr>
        <td>
         Product: <select id="product">
<option value="0">Select a Product</option>
<option value="1">Stair Nosing</option>
<option value="2">Stair Tread Covers</option>
<option value="3">Landing Covers</option>
<option value="4">Flat Plate</option>
<option value="5">50mm Convex Decking Strips</option>
<option value="6">100mm Convex Decking Strips</option>
<option value="7">Fixings</option>
</select>
<div id="1">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="StairNosingColour">
<option value="Colour">Select a Colour</option>
<option value="1">Yellow</option>
<option value="2">Black</option>
<option value="3">White</option>
<option value="4">Luminous</option>
</select></br>
Size:
<select id="StairNosingSize">
<option value="Size">Select a Size</option>
<option value="1">750mm Length (L to R) x 55mm Depth (going)</option>
<option value="2">1000mm Length (L to R) x 55mm Depth (going)</option>
<option value="3">1500mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">2000mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">2500mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 55mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled Holes">
</div>
<div id="2">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="StairTreadCoversColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black with White Nosing</option>
<option value="2">Black with Yellow Nosing</option>
</select></br>
Size:
<select id="StairTreadCoversSize">
<option value="Size">Select a Size</option>
<option value="1">750mm Length (L to R) x 345mm Depth (going)</option>
<option value="2">1000mm Length (L to R) x 345mm Depth (going)</option>
<option value="3">1500mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">2000mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">2500mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 345mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
</div>
<div id="3">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="LandingCoversColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black with Yellow Nosing</option>
</select></br>
Size:
<select id="LandingCoversSize">
<option value="Size">Select a Size</option>
<option value="1">1220mm Length (L to R) x 1220mm Depth (going)</option>
<option value="2">2440mm Length (L to R) x 1220mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
</div>
<div id="4">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="FlatPlateColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
<option value="1">Grey</option>
</select></br>
Size:
<select id="LandingCoversSize">
<option value="Size">Select a Size</option>
<option value="1">1220mm Length (L to R) x 1220mm Depth (going)</option>
<option value="2">2000mm Length (L to R) x 1000mm Depth (going)</option>
<option value="3">2440mm Length (L to R) x 1220mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
</div>
<div id="5">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="50mmStripColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
</select></br>
Size:
<select id="50mmStripSize">
<option value="Size">Select a Size</option>
<option value="1">1000mm Length (L to R) x 50mm Depth (going)</option>
<option value="2">1500mm Length (L to R) x 50mm Depth (going)</option>
<option value="3">2000mm Length (L to R) x 50mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 50mm Depth (going)</option>
<option value="5">3600mm Length (L to R) x 50mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled Holes">
</div>
<div id="6">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="100mmStripColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
</select></br>
Size:
<select id="100mmStripSize">
<option value="Size">Select a Size</option>
<option value="1">1000mm Length (L to R) x 100mm Depth (going)</option>
<option value="2">1500mm Length (L to R) x 100mm Depth (going)</option>
<option value="3">2000mm Length (L to R) x 100mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 100mm Depth (going)</option>
<option value="5">3600mm Length (L to R) x 100mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled     Holes">
</div>
<div id="7">
Quantity: <input name="Quantity" type="text" value=""></br>
Size:
<select id="FixingSize">
<option value="Size">Select a Size</option>
<option value="1">SureStep Clear Adhesive 310ml Cartridge</option>
<option value="2">Box of 100 Self Drilling Screws M4.8 x 25mm</option>
<option value="3">Box of 100 Wood Screws & Plugs M4.8 x 35mm</option>
<option value="4">Square Plate, Nut & Bolt 45 x 45mm M8 x 35mm</option>
</select>
</div>

        </td>
                    <td><a href="#">Remove Product</a>

        </td>
    </tr>
</table>
</form>
<button type="button" id="addTableRow">Add Another Product</button>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

因为您没有将click事件绑定到新元素，并且id必须是唯一的，所以不能重复它们。

相关问题
最新问题