在Javascript和Laravel 5.3中使用Foreach循环

我想制作一个按钮来添加新项目行：

这是create.blade.php中的HTML

            <div class="createOrderForm" id="orderMenuItems">
            
                <div class="orderItem">
                    
                    <label> Item : </label>
                    <select name="item[]" required>

                        <option value="">Menu Items</option>

                        @foreach ($menuItems as $item)
                        <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach

                    </select>
                    
                    <label>Quantity :</label>
                    
                    <input  type="text" name="quantity[]" value="" required>
                
                </div>
            
            </div>

而不是：

newItem += "@foreach ($menuItems as $item)";
....
newItem += "@endforeach";

但它不起作用

---

我如何修复它？？？

我在laravel方面没有经验，但我猜它根本不觉得对js文件负责

我不喜欢这种将标记存储在两个位置的方法。一次在html中，一次在JS中的字符串中。你必须让这两个地方保持同步

我是否可以提出一种不同的方法：

在create.blade.php中：

<div class="createOrderForm" id="orderMenuItems">
    <div class="orderItem">

        <label> Item : </label>
        <select name="item[]" required>

            <option value="">Menu Items</option>

            @foreach ($menuItems as $item)
            <option value="{{$item->id}}">{{$item->name}}</option>
            @endforeach

        </select>

        <label>Quantity :</label>

        <input  type="text" name="quantity[]" value="" required>

    </div>
</div>

---

我想这是因为你混合了php和javascript，所以{！！$item->id！！}没有得到php的响应，而是被设置为一个字符串。那么，我应该怎么做才能让它工作呢@GreenwoodzSomething先生，如var itemID='；'；我试过了，但还是有同样的问题@GreenwoodzYou先生需要在JS中生成select并将其附加到JS中。不要使用刀片，它不会被编译。您需要ajax来获取您的值。@RowaydaKhayri，没有js变量不是以

$

开头的，但我已经采用了这种命名变量的模式，这些变量存储对jQuery对象的引用，并带有前导的

$

，主要用于区分这些jQuery列表和本机对象，主要是真实的DOM节点和数组。碰巧这个代码段只包含存储jquery对象的变量。。但新行具有默认数量值作为第一行。。有没有办法解决这个问题？@RowaydaKhayri没有检查这个问题，认为隐式的

.clone（false）

可以解决这个问题。我已经更新了答案，添加了初始

.orderItem

的标记，而不是克隆的节点，因为值在更改时不会存储到标记中。

@foreach ($menuItems as $item)
....
@endforeach

newItem += "@foreach ($menuItems as $item)";
....
newItem += "@endforeach";

<div class="createOrderForm" id="orderMenuItems">
    <div class="orderItem">

        <label> Item : </label>
        <select name="item[]" required>

            <option value="">Menu Items</option>

            @foreach ($menuItems as $item)
            <option value="{{$item->id}}">{{$item->name}}</option>
            @endforeach

        </select>

        <label>Quantity :</label>

        <input  type="text" name="quantity[]" value="" required>

    </div>
</div>

$(document).ready(function () {
    console.log("Welcome To create order Page");

    var $addItem = $('#addItem');
    var $orderMenuItems = $('#orderMenuItems');

    $addItem.click(function(){
        var markup = $orderMenuItems.children('.orderItem')[0].outerHTML;
        $orderMenuItems.append(markup);
    });
});