jQuery/Ajax：使用 ajax 以动态形式填充选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19036821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery/Ajax: Using ajax to populate select boxes in a dynamic form
提问by Mark Henshaw
HTML:
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);
});
});
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?
我正在尝试使用基于第一个选择更改的动态选择创建一个动态表单。我的问题是页面加载时创建的第一行工作正常，但是当我添加第二行并更改该行中的第一个选择时，它会重置第一行中的动态选择。如何更改 javascript 以便每行中的第一个选择仅影响同一行中的第二个选择？
Thank you for any assistance with this.
感谢您对此提供的任何帮助。
回答by rafaelcastrocouto
I made several changes to the code and tested in a local server ... it's working just fine:
我对代码进行了几处更改并在本地服务器中进行了测试……它工作得很好：
http://jsfiddle.net/r4ffel/fYm2r/
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:
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);
});
});
