Javascript 添加新产品时不刷新逻辑表单_Javascript_Jquery_Html_Forms

Javascript 添加新产品时不刷新逻辑表单

javascript jquery html forms

Javascript 添加新产品时不刷新逻辑表单,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我的表格有问题。你可以在这里看到：基本上，表单的目的是让用户可以选择一个产品，并且只接收该产品的特定选项，目前确实如此，但是问题是当用户单击添加新产品时，一旦他们这样做，下拉列表就不再只显示该产品的必要数据有人能帮忙吗？上面的链接和这里的代码，或者如果有人有更好的方法来做这件事，那将是伟大的，我知道代码是混乱的，我仍然必须把它整理出来，以便表单数据以某种易读的格式通过 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

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

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

有人能帮忙吗？上面的链接和这里的代码，或者如果有人有更好的方法来做这件事，那将是伟大的，我知道代码是混乱的，我仍然必须把它整理出来，以便表单数据以某种易读的格式通过

<!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>


无标题文件
$（文档）.ready（函数（）{
$（“#产品”）。更改（功能（）{
var selected=$（“#产品选项：selected”）.val（）；
$（'div'）.hide（）；
$（'#'+选中）。显示（）；
});
$（'div'）.hide（）；
});
// 0) {
$（'tbody'，this）.append（tds）；
}否则{
$（此）.append（tds）；
}
});
});
});
}//]]>  
产品：
选择产品
楼梯前缘
楼梯踏板盖
着陆盖
平板
50mm凸面装饰条
100mm凸面装饰条
固定件
数量：

颜色：
选择一种颜色
黄色的
黑色
白色
发光的


尺寸：
选择一个尺寸
750mm长（左至右）x 55mm深（下）
1000mm长（左至右）x 55mm深（下）
1500mm长（左至右）x 55mm深（下）
2000mm长（左至右）x 55mm深（下）
2500mm长（左至右）x 55mm深（下）
3000mm长（左至右）x 55mm深（下）


切割和钻孔说明：
数量：

颜色：
选择一种颜色
黑边白边
黑边黄边


尺寸：
选择一个尺寸
750mm长（左至右）x 345mm深（下）
1000mm长（左至右）x 345mm深（下）
1500mm长（左至右）x 345mm深（下）
2000mm长（左至右）x 345mm深（下）
2500mm长（左至右）x 345mm深（下）
3000mm长（左至右）x 345mm深（下）


切割和钻孔说明：
数量：

颜色：
选择一种颜色
黑边黄边


尺寸：
选择一个尺寸
1220mm长（左至右）x 1220mm深（下）
2440mm长（左至右）x 1220mm深（下）


切割和钻孔说明：
数量：

颜色：
选择一种颜色
黑色
黄色的
米色
灰色


尺寸：
选择一个尺寸
1220mm长（左至右）x 1220mm深（下）
2000mm长（长至右）x 1000mm深（下）
2440mm长（左至右）x 1220mm深（下）


切割和钻孔说明：
数量：

颜色：
选择一种颜色
黑色
黄色的
米色


尺寸：
选择一个尺寸
1000mm长（长至右）x 50mm深（下）
1500mm长（左至右）x 50mm深（下）
2000mm长（长至右）x 50mm深（下）
3000mm长（左至右）x 50mm深（下）
3600mm长（左至右）x 50mm深（下）


切割和钻孔说明：
数量：

颜色：
选择一种颜色
黑色
黄色的
米色


尺寸：
选择一个尺寸
1000mm长（长至右）x 100mm深（下）
1500mm长（左至右）x 100mm深（下）
2000mm长（长至右）x 100mm深（下）
3000mm长（左至右）x 100mm深（下）
3600mm长（左至右）x 100mm深（下）


切割和钻孔说明：
数量：

尺寸：
选择一个尺寸
SureStep透明粘合剂310ml墨盒
一盒100颗M4.8 x 25mm自钻螺钉
100个木螺钉和插头盒M4.8 x 35毫米
方板、螺母和螺栓45 x 45毫米M8 x 35毫米
添加其他产品

因为您没有将单击事件绑定到新元素，并且ID需要唯一，所以不能重复

首先，ID在文档上下文中必须是唯一的，您需要为新添加的元素hanks委派事件，但我绝不是程序员，任何指针都将受到极大的欢迎！谢谢，但我绝不是一个程序员，任何指点都会非常感激！