Javascript 加载数组元素的脚本
我正在尝试创建一个动态表单，您可以在其中订购一些东西 在基本表单中，我们有一行，但是如果您想动态订购更多的东西，我们可以不重新加载页面，添加新行。到目前为止，一切都正常工作，但在这种形式下，我们有两个下拉输入选择列表。这些下拉列表相互依赖，不知道如何加载它们之间的关系和选项。我在网上尝试了许多不同的例子，但总是只在第一个默认行正确工作。动态创建的行不再相互依赖 如果我做错了什么，你知道更好的方法，请告诉我这条路 我请求你的帮助，因为我真的依靠你。先谢谢你 更新 嗯。。现在我明白了，但我不知道如何在我的网页代码中使用它。将向您显示网页代码：Javascript 加载数组元素的脚本,javascript,Javascript,我正在尝试创建一个动态表单，您可以在其中订购一些东西 在基本表单中，我们有一行，但是如果您想动态订购更多的东西，我们可以不重新加载页面，添加新行。到目前为止，一切都正常工作，但在这种形式下，我们有两个下拉输入选择列表。这些下拉列表相互依赖，不知道如何加载它们之间的关系和选项。我在网上尝试了许多不同的例子，但总是只在第一个默认行正确工作。动态创建的行不再相互依赖 如果我做错了什么，你知道更好的方法，请告诉我这条路 我请求你的帮助，因为我真的依靠你。先谢谢你 更新 嗯。。现在我明白了，但我不知道如何
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>
<html><br>
<head><br>
<title>Dynamic forms</title><br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script><br>
<script language="javascript" src="chainedselects.js"></script><br>
<script language="javascript" src="exampleconfig2.js"></script><br>
</head>
<body onload="initListGroup('vehicles', document.formm.elements['group[]'], document.formm.elements['product[]'], 'cs')">
<script type="text/javascript">
$(document).ready(function(){
var i = 2;
var templateRow = jQuery.format($("#template").val());
function addRow() {
var ii = i++;
$(templateRow(ii)).appendTo("#listProducts tbody");
$("#removeProduct_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
$("#addProduct").click(addRow);
});
</script>
<!-- Template row in the table -->
<textarea id="template" style="display:none;" cols="1" rows="1">
<tr id="row_{0}" valign="top">
<td>{0}.</td>
<td><select name="group[]" style="width: 100%;"></select></td>
<td><select name="product[]" style="width: 100%;"></select></td>
<td><input type="text" name="price[]" style="width: 100px;"></td>
<td><input type="text" name="quantity[]" style="width: 97%;"></td>
<td><img src="remove.png" id="removeProduct_{0}" alt="remove"></td>
</tr>
</textarea>
<!-- This summary table -->
<form name="formm" action="parser.php" method="post">
<table id="listProducts" name="list">
<thead>
<tr>
<th>Nr</th>
<th>Group</th>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>+/-</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3" align="left">
<input type="submit" name="send" value="Send" style="width: 100px;">
</th>
</tr>
</tfoot>
<tbody>
<tr valign="top">
<td>1.</td>
<td><select name="group[]" style="width: 100%;"></select></td>
<td><select name="product[]" style="width: 100%;"></select></td>
<td><input type="text" name="price[]" style="width: 100px;"></td>
<td><input type="text" name="quantity[]" style="width: 97%;"></td>
<td><img src="add.png" id="addProduct" alt="add"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<?php
$data = array();
$data['Groups'] = $_POST['group'];
$data['Products'] = $_POST['product'];
$data['Prices'] = $_POST['price'];
$data['Quantity'] = $_POST['quantity'];
$result = print_r($data,true);
echo "<pre>$result</pre>";
?>
.单击事件未附加到新创建的行，因此您需要确保创建新行后，所有新行都附加了单击事件
然后，所有新行都应该附加所有必要的事件。我是否正确理解了这一点：如果用户更改了dropdown1中的选择，dropdown2中的选项应该更改？我们需要你的代码样本来帮助。是的，你明白。好吧，抛出代码，但我必须等到添加问题后的8小时。虽然我为您修复了它，但请阅读编辑器帮助中的代码格式规则。真的没有必要转义HTML标记并在代码中加入所有的标记。只需用4个空格缩进，或者选择完整的代码块，然后按编辑器工具栏上的{}代码按钮。很抱歉。这是我第一次遇到这种格式化文本。在其他论坛上，我的做法有所不同。快来吧。。我会这么说的。那么，你能帮我吗？非常高兴，因为我明天需要它，而且可能已经尝试了我知道的一切。
function dependantFunction() {
/* code */
}
function addNewRow() {
var a=document.createElement("div");
var b=document.createElement("img");
b.src="images/add.png";
b.addEventListener("click", dependantFunction, false);
a.appendChild(b);
document.getElementById("rowholder").append(a);
}