HTML：

<form name="order" action="order_stuff.php" method="post">
<table id="myTable">
<thead>
<tr><td></td><th>Group</th><th>Item</th><th>Quantity</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select name="group1" id="ctlGroup">
<option value="dimensioner">Dimensioner</option>
<option value="scanner">Scanner</option>
<option value="scale">Scale</option>
<option value="camera">Cameras</option>
<option value="computer">Computer</option>
<option value="network">Network</option>
<option value="cables">Cables</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<select name="item1" id="ctlItem">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="quantity1" value="" />
</td>
</tr>
</tbody>
<tfoot>
<tr><td><a href="#" id="addVar">Add Item</a></td><td colspan="2"></td><td><input type="submit" name="submit" value="Place Order" /></td></tr>
</tfoot>
</table>
</form>

JAVA：

JAVA:

$('form').on('click', '.removeVar', function(){
    $(this).parent().remove();
});

//add a new node
var varCount = 2;
$('#addVar').on('click', function(){
   $node = '<tr><td>'+varCount+'</td><td><select name="group'+varCount+'" id="ctlGroup">       <option value="dimensioner">Dimensioner</option><option value="scanner">Scanner</option><option value="scale">Scale</option><option value="camera">Cameras</option><option value="computer">Computer</option><option value="network">Network</option><option value="cables">Cables</option><option value="Other">Other</option></select></td><td><select name="item'+varCount+'" id="ctlItem><option value=""></option></select></td><td><input type="text" name="quantity'+varCount+'" value="" /></td></tr>';
   $("#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 += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }

        $("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 += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }

        $("select#ctlItem").html(options);
    });
});

我想创建一个动态表单与动态的选择是基于第一选择改变。我的问题是在页面加载时工作正常，但是当我添加第二行，我改变该行的第一选择它重置动态选择第一行中的第一行创建。我如何可以改变的JavaScript使每一行中首先选择不仅影响同一行？

I am trying to create a dynamic form with a dynamic select that is changed based on the first select. My problem is that the first row that is created when the page loads works fine but when i add the second row and i change the first select in that row it resets the dynamic select in the first row. How can i change the javascript so the first select in each row only affects the second select in the same row?

感谢您与此的任何帮助。

Thank you for any assistance with this.

推荐答案

我做了一些改动到code和在本地服务器上测试...它工作得很好：

I made several changes to the code and tested in a local server ... it's working just fine:

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

HTML：

<form name="order" action="order_stuff.php" method="post">
<table id="myTable">
    <thead>
        <tr>
            <th></th>
            <th>Group</th>
            <th>Item</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="count">1</td>
            <td>
                <select name="group" class="ctlGroup">
                    <option value="dimensioner">Dimensioner</option>
                    <option value="scanner">Scanner</option>
                    <option value="scale">Scale</option>
                    <option value="camera">Cameras</option>
                    <option value="computer">Computer</option>
                    <option value="network">Network</option>
                    <option value="cables">Cables</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <select name="item" class="ctlItem"> 
                    <option value=""></option>
                </select>
            </td>
            <td>
                <input type="text" name="quantity1" value="" />
            </td>
            <td>
                <input type="button" value="X" class="removeVar"/>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <input type="button" id="addVar" value="Add Item"/>
            </td>
            <td colspan="2">
            </td>
            <td>
                <input type="submit" name="submit" value="Place Order"/>
            </td>                
        </tr>
    </tfoot>
</table>
</form>

记者：

$('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 = ['<tr>',
  '<td class="count">'+varCount+'</td>',
  '<td><select name="group" class="ctlGroup">',
  '<option value="dimensioner">Dimensioner</option>',
  '<option value="scanner">Scanner</option>',
  '<option value="scale">Scale</option>',
  '<option value="camera">Cameras</option>',
  '<option value="computer">Computer</option>',
  '<option value="network">Network</option>',
  '<option value="cables">Cables</option>',
  '<option value="Other">Other</option>',
  '</select></td>',
  '<td><select name="item" class="ctlItem">',
  '<option value=""></option>',
  '</select></td>',
  '<td><input type="text" name="quantity" value=""/></td>',
  '<td><input type="button" value="X" class="removeVar"/>',
  '</td></tr>'].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 += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }    
    row.find(".ctlItem").html(options);
  });
});