Проблема с составлением select тега для редактирования записи со сложными условиями
У меня есть запись в базе. Если конкретнее запись с кулинарным рецептом. На вьюху формы редактирования я передаю:
- $recipe - Запись о рецепте из базы данных.
- $allIngredients - содержимое таблицы "ingredients" со всеми доступными ингридиентами
- $measure - содержимое таблицы "measure" со всеми вариантами мер (например: чайная ложка, столовая ложка etc)
- $ingredients - список ингридиентов по конкретному рецепту, который редактируется.
Для тегов select использую select2 jQuery.
Так выглядит вьюха

Первая строка дропдаунов остается всегда, на ней в конце элемент для добавления строк инпутов. Далее мне необходимо создать столько строк с дропдаунами сколько у меня ингридиентов в рецепте. С заранее выбранными ингридиентами в этих дропдаунах. То что пытался воплотить я выглядит следующим образом:
@foreach ($ingredients as $ingredient)
<tr>
<td>
<select id="createIngredients" style="width: 300px;" name="addmore[0][ingredient_id]">
<option ></option>
@foreach ($allIngredients as $allIngredient)
<option value={{ $allIngredient->id }}
@if($allIngredient->id == $ingredient->id)
selected
@endif>{{ $allIngredient->name }}</option>
@endforeach
</select>
</td>
<td>
<select id="measures" style="width: 300px;" name="addmore[0][measure_id]">
<option></option>
@foreach ($measure as $mera)
<option value={{ $mera->id }}>{{ $mera->name }}</option>
@endforeach
</select>
</td>
<td><input type="text" name="addmore[0][amount]" placeholder="Введите количество" class="form-control" /></td>
<td><button type="button" class="btn btn-danger remove-tr"><i class="fa fa-trash"></i></button></td>
</tr>
@endforeach
Используемый js код:
<script type="text/javascript">
$("#ingredients").select2({
placeholder:'Выберите имеющиеся продукты',
allowClear: true,
closeOnSelect: false,
theme: "classic"
});
$("#order").select2({
placeholder:'Выберите варианты сортировки',
allowClear: true,
theme: "classic"
});
$("#measures").select2({
placeholder:'Выберите меру',
allowClear: true,
theme: "classic"
});
$("#createIngredients").select2({
placeholder:'Выберите игридиент',
allowClear: true,
theme: "classic"
});
$(".selectIngredients").select2({
placeholder:'Выберите игридиент',
allowClear: true,
theme: "classic"
});
var i = 0;
$("#add").click(function(){
++i;
$("#dynamicTable").append('<tr><td><select class="selectIngredients" style="width: 300px;" name="addmore['+i+'][ingredient_id]"><option ></option>@foreach ($allIngredients as $ingredient)<option value={{ $ingredient->id }}>{{ $ingredient->name }}</option>@endforeach</select></td><td><select id="measures" style="width: 300px;" name="addmore['+i+'][measure_id]"><option></option>@foreach ($measure as $mera)<option value={{ $mera->id }}>{{ $mera->name }}</option>@endforeach</select></td><td><input type="text" name="addmore['+i+'][amount]" placeholder="Введите количество" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr"><i class="fa fa-trash"></i></button></td></tr>');
});
$(document).on('click', '.remove-tr', function(){
$(this).parents('tr').remove();
});
</script>
Так выглядит таблица с данными о ингридиентах к каждому рецепту.
Возможно будет решением затирать все старые данные и выводить новые.
А в форме редактирования не плодить инпуты а просто оставлять один первый.
И заново вводить все ингридиенты.