Question

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：

$('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以使每行中的第一个选择仅影响同一行中的第二个选择？

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

Answer 1

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

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>

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 = ['<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);
  });
});

jQuery / Ajax：使用ajax填充动态表单中的选择框

1 个答案: