Проблема с составлением select тега для редактирования записи со сложными условиями

У меня есть запись в базе. Если конкретнее запись с кулинарным рецептом. На вьюху формы редактирования я передаю:

  1. $recipe - Запись о рецепте из базы данных.
  2. $allIngredients - содержимое таблицы "ingredients" со всеми доступными ингридиентами
  3. $measure - содержимое таблицы "measure" со всеми вариантами мер (например: чайная ложка, столовая ложка etc)
  4. $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>

Так выглядит таблица с данными о ингридиентах к каждому рецепту. таблица с рецептами Возможно будет решением затирать все старые данные и выводить новые. А в форме редактирования не плодить инпуты а просто оставлять один первый. И заново вводить все ингридиенты.


Ответы (0 шт):