I'm using .append() to create new lines inside a form composed by select boxes that are updated based on the value of the first one.
The purpose is to create as many lines (groups of select boxes) as needed and by changing the value of the first select box they update the others in the line.
I managed to do this with the following code:
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>
This all works ok for the first line.
All the others that are created by the .append() in Jquery aren´t updated when the select box "Select_1" value is changed.
I need that all the lines created by append have the funcionality to update the 3 select boxes by change the first select box value.
I'm using JQuery 2.1.4
Thanks in advance.