我正在使用.append（）在由选择框组成的表单中创建新行，这些选择框根据第一个框的值进行更新。
其目的是根据需要创建尽可能多的行（选择框组），并通过更改第一个选择框的值来更新行中的其他行。
我用以下代码做到了这一点：
HTML:
<div class="input_fields_wrap">
<table>
<tr>
<td class="span1">Select_1: </td>
<td class="span1">Select_2: </td>
<td class="span1">Select_3: </td>
<td class="span1">Select_4: </td>
</tr>
<tr>
<td>
<select class="span2" id='Select_1' name='Select_1[]'>
<option value="0">Seleccione...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select class="span2" id='Select_2' name='Select_2[]'>
<option value="0">Seleccione...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select class="span2" id='Select_3' name='Select_3[]'>
<option value="0">Seleccione...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td>
<select class="span2" id='Select_4' name='Select_4[]'>
<option value="0">Seleccione...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
</table>
</div>
JQUERY:
<script type="text/javascript">
$('#Select_1').change(function(){
$('#Select_2').load("file.php?ID1=" + $(this).val());
$('#Select_3').load("file.php?ID2=" + $(this).val());
$('#Select_4').load("file.php?ID3=" + $(this).val());
});
var max_fields = 20;
var x = 1;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
var html = '<div class="input_fields_wrap">';
html = html + '<select class="span2" id="Select_1" name="Select_1[]"><option value="0">Seleccione...</option><?php foreach($var1 as $row1){echo '<option value="'.$row1['ID'].'">'.$row1['Name'].'</option>';}?></select>';
html = html + '<select class="span2" id="Select_2" name="Select_2[]"><option value="0">Seleccione...</option><?php foreach($var2 as $row2){echo '<option value="'.$row2['ID'].'">'.$row2['Name'].'</option>';}?></select>';
html = html + '<select class="span2" id="Select_3" name="Select_3[]"><option value="0">Seleccione...</option><?php foreach($var3 as $row3){echo '<option value="'.$row3['ID'].'">'.$row3['Name'].'</option>';}?></select>';
html = html + '<select class="span2" id="Select_4" name="Select_4[]"><option value="0">Seleccione...</option><?php foreach($var4 as $row4){echo '<option value="'.$row4['ID'].'">'.$row4['Name'].'</option>';}?></select>';
html = html + '<button onclick="#" class="remove_field">Remove</button></div>';
$(wrapper).append(html);
}
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
</script>
这一切都适用于第一行。
当选择框"select_1"值更改时，Jquery中.append（）创建的所有其他项都不会更新。
我需要所有通过append创建的行都具有通过更改第一个选择框值来更新3个选择框的功能。
我正在使用JQuery 2.1.4
提前谢谢。
刚刚发现问题。这毕竟是个棘手的问题。
只需：
- 再次调用自动完成函数以解决组合框问题
- 用一个自动递增的数字重命名附加代码中的组合框，以考虑每一行
- 使用新的组合框名称追加后，运行更新组合框代码
以下是要放在append命令后面的代码：
$(wrapper).append(html);
$("#Select"+x).combobox({
select: function (event, ui){
$('#Select'+x).load("file.php?ID1=" + $(this).val());
$('#Select'+x).load("file.php?ID2=" + $(this).val());
$('#Select'+x).load("file.php?ID3=" + $(this).val());
}
});
该解决方案在这里找到了一些帮助：jQuery append元素无法使用自动完成
谢谢大家！