加载数组元素的脚本

我正在尝试创建一个动态表单，您可以在其中订购一些东西。加载数组元素的脚本

在基本形式中，我们有一行，但如果您想要订购更多的东西，我们可以在不重新加载页面的情况下动态添加新行。到目前为止，所有工作都适合我，但在这种形式下，我们有两个下拉列表（“输入选择”）。这些下拉列表相互依赖，不知道如何加载它们之间的关系以及选择的选项。我已经尝试了许多来自互联网的不同示例，但始终只能正确使用第一个默认行。动态创建的行不再相互依赖。

如果我做错了什么，而且你知道更好的方法，请以这种方式展示给我。

我问你的帮助，因为我真的依赖于此。先谢谢你。 ;）

Screenshot of the form

更新

嗯..现在我明白了，但我不太知道如何在我的网页代码中使用它。会告诉你的网页代码：

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

这是一个parser.php：

<?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>"; 
?>

Here is link to all code。

来源

2011-11-17 Kyuubi

我是否正确理解这一点：如果用户更改了dropdown1中的选择，那么dropdown2中的选项应该改变？我们需要您的代码样本来提供帮助。 – Beat

是的，你明白。那么，抛出代码，但我必须等到问题添加8小时后。 – Kyuubi

尽管我为您解决了这个问题，请阅读编辑器帮助中的代码格式规则。实际上不需要“转义”HTML标签并将所有的'
'都放入代码中。只需缩进4个空格或选择完整的代码块，然后按下编辑器工具栏中的“{}”代码按钮。 – BalusC

点击事件并未附加到新创建的行，因此您需要确保任何新行在创建之后都附加了点击事件。

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); 
}

然后，所有新行都应该附加所有必要的事件。

来源

2011-11-17 11:23:03 Verifex

打我吧..我会这么说。 – 2011-11-17 12:00:46

那么，你可以帮我吗？非常喜欢它，因为我明天需要它，可能已经尝试了我所知道的一切。 – Kyuubi

加载数组元素的脚本

回答

相关问题