0

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>

ジャワ:

$('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);
    });
});

最初の選択に基づいて変更される動的選択で動的フォームを作成しようとしています。私の問題は、ページの読み込み時に作成された最初の行が正常に機能することですが、2 行目を追加してその行の最初の選択を変更すると、最初の行の動的選択がリセットされます。各行の最初の選択が同じ行の2番目の選択にのみ影響するようにjavascriptを変更するにはどうすればよいですか?

ご協力いただきありがとうございます。

4

1 に答える 1

2

コードにいくつかの変更を加え、ローカルサーバーでテストしました...問題なく動作しています:

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>

J:

$('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);
  });
});
于 2013-09-26T21:17:21.047 に答える