Javascript 具有多表单输入的Ajax

我正在开发一个新系统，在jquery+ajax的应用中遇到了一些困难，我要让它与页面上发生的其他事情一起正常工作

基本上，页面是提交报价，在页面上可以添加任意多的报价项。当某人单击新项目时，它将运行下面的代码，该代码获取隐藏元素的值，并在所有新元素ID中使用该值，以保持它们的唯一性

新产品代码：

    function addFormField() {
        var id = document.getElementById("field_id").value;
        $("#products").append("
<table width='600' cellpadding='5' cellspacing='0' class='Add_Products' id='row" + id + "'>
    <td width='250' class='left'>
      <label>Select Product Category</label>
    </td>
    <td class='right' >
      <label><select name='ProductCategory' id='ProductCategory'>
      <?php foreach($categories as $key=>$category){ 
                echo "<option value=".$key.">".$category."</option>"; 
            } 
             ?>
       </select>
      </label>
    </td>
  </tr>
  <tr>
     <td width='250' class='left'>
        <label>Select Product Template</label>
     </td>
     <td class='right' >
         <label>
         <select name='data[QuoteItem][" + id + "][product_id]' id='QuoteItem" + id + "product_id'></select>
          </label>
     </td>
   </tr>
   <tr >
     <td class='left'>Name</td>
     <td class='right'>
          <label>
             <input name='data[QuoteItem][" + id + "][name]' type='text' id='QuoteItem" + id + "name' size='50' />
          </label>
      </td>
    </tr>
     <tr >
       <td class='left'>
           Price (ex GST)
       </td>
       <td class='right'>
           <input type='text' name='data[QuoteItem][" + id + "][price]' id='QuoteItem" + id + "price' onchange='totalProductPrice();' class='quote-item-price' />
       </td>
    </tr>
    <tr>
       <td class='left'>
           Description
       </td>
       <td class='right'>
          <label>
                <textarea name='data[QuoteItem][" + id + "][description]' cols='38' rows='5' id='QuoteItem" + id + "description'>
                </textarea>
           </label>
         </td>
      </tr>
      <tr>
         <td>
           <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a>
         </td>
      </tr>
  </table>
");


        $('#row' + id).highlightFade({
            speed:1000
        });

        id = (id - 1) + 2;
        document.getElementById("field_id").value = id;
    }

函数addFormField（）{
var id=document.getElementById（“字段id”）.value；
$（“#产品”）。附加（”
选择产品类别
选择产品模板
名称
价格（扣除商品及服务税）
描述
");
$（'#行'+id）.高亮淡入淡出({
速度：1000
});
id=（id-1）+2；
document.getElementById（“field_id”）.value=id；
}

接下来我要做的是使用jQuery设置一个AJAX查询，选中该查询将请求适当的数据并填充products框，但我不知道如何获取该组元素的ID，以确保填充正确的下拉框，并确保检测到正确框的onchange

我尝试过将ID添加到下拉框的ID中的方法，但是onchagne不起作用

下面是我的jquery ajax代码，它检索了产品列表

    $(function(){
      $("select#ProductCategory").change(function(){
        var url = "productList/" + $(this).val() + "";
        var id = $("select#ProductCategory").attr('name');
        $.getJSON(url,{id: $(this).val(), ajax: 'true'}, function(j){
          var options = '';
        options += '<option value="0">None</option>';
          $.each(j, function(key, value){
        options += '<option value="' + key + '">' + value + '</option>';
          })
          $("select#QuoteItem" + id + "product_id").html(options);
        })
      })
    })  

$（函数（）{
$（“选择#产品类别”）.change（函数（）{
var url=“productList/”+$（this.val（）+”；
变量id=$（“选择#产品类别”）.attr（'name'）；
$.getJSON（url，{id:$（this）.val（），ajax:'true'}，函数（j）{
var选项=“”；
选项+=‘无’；
$。每个（j，函数（键，值）{
选项+=''+值+''；
})
$（“选择#QuoteItem”+id+“产品id”）.html（选项）；
})
})
})  

因为我的一生都无法理解这一点，所以如果有人能告诉我最好的方法，那就太好了

另外，如果我需要进一步澄清，请让我知道，因为我正在努力解释

---

提前感谢

我的项目中有类似的功能。以下是我的做法：

我有一个全局变量，以0开头，每次添加新字段时都会增加：

var num = 0;

jQuery(function($){
  $("#add_field").click(function(){
    num++;
    //here add new field, with id contains 'num'
  });
});

为了使调试更容易，您应该从一个简单的元素开始，测试它以使其无bug，并向其添加更多字段

要通过AJAX提交表单，请使用，这样就不需要在提交表单的AJAX代码中手动添加所有字段