jQuery / Ajax：使用ajax以动态forms填充选择框

HTML：

 
 
 
Group
Item
Quantity
 
 
 
 
1
 
  Dimensioner Scanner Scale Cameras Computer Network Cables Other  
 
    
 
  
 
 
 
 
Add Item
 
 
  

JAVA：

 $('form').on('click', '.removeVar', function(){ $(this).parent().remove(); }); //add a new node var varCount = 2; $('#addVar').on('click', function(){ $node = ''+varCount+' DimensionerScannerScaleCamerasComputerNetworkCablesOther'; $("#invars").val(varCount); $('#myTable > tbody:last').append($node); varCount++; }); $("select#ctlGroup").change(function() { $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].title + ''; } $("select#ctlItem").html(options); }); }); $("#myTable").on('change', "#ctlGroup", function(){ $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].title + ''; } $("select#ctlItem").html(options); }); }); 

我正在尝试使用基于第一个选择更改的动态选择创建动态表单。 我的问题是，当页面加载时创建的第一行工作正常，但是当我添加第二行并更改该行中的第一个选择时，它会重置第一行中的动态选择。 如何更改javascript以使每行中的第一个选择仅影响同一行中的第二个选择？

感谢您对此提供任何帮助。

Answer 1

我对代码进行了一些更改，并在本地服务器上进行了测试……它工作得很好：

http://jsfiddle.net/r4ffel/fYm2r/

HTML：

 
 
 
 
 
 
Group
 
Item
 
Quantity
 
 
 
 
 
1
 
  Dimensioner Scanner Scale Cameras Computer Network Cables Other  
 
    
 
  
 
  
 
 
 
 
 
  
 
 
 
  
 
 
 
  

JS：

 $('form').on('click', '.removeVar', function(){ $(this).closest('tr').remove(); $('.count').each(function(i){ $(this).text(i + 1); }); }); $('#addVar').on('click', function(){ var varCount = $('#myTable tr').length - 1; $node = ['', ''+varCount+'', '', 'Dimensioner', 'Scanner', 'Scale', 'Cameras', 'Computer', 'Network', 'Cables', 'Other', '', '', '', '', '', '', ''].join('\n'); $('#myTable > tbody:last').append($node); }); $("#myTable").on('change', ".ctlGroup", function(){ var row = $(this).closest('tr'); $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'},function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].title + ''; } row.find(".ctlItem").html(options); }); });