Jquery: автоматически обновлять группу полей выбора, созданных при добавлении при изменении первого выбора

Question

Jquery: автоматически обновлять группу полей выбора, созданных при добавлении при изменении первого выбора

Я использую .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>

Это все работает нормально для первой строки.

Все остальные, созданные .append () в Jquery, не обновляются при изменении значения в поле выбора «Select_1».

Мне нужно, чтобы все строки, созданные с помощью append, имели функцию обновления 3 блоков выбора путем изменения значения первого блока выбора.

Я использую JQuery 2.1.4

Заранее спасибо.

0

append jquery php select

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Просто нашел проблему.
В конце концов, это был нубский вопрос.

Просто нужно:

Вызовите функцию автозаполнения снова, чтобы решить проблему со списком;
Переименуйте поля со списком в коде дополнения с помощью номера автоинкремента, чтобы рассмотреть каждую строку;
Запустите обновление кода комбинированных списков после добавления с новым именем комбинированных списков;

Вот код, который нужно поместить сразу после команды добавления:

$(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 добавить элементы не работают с автозаполнением

Спасибо за все!

0