如何在js文件中使用foreach循环？

Question

$(document).ready(function() {
        $("form").on("click", ".addRow", function(){
            var ttr =   '<div class="row add tr">'+
                           '<div class="col">'+
                                '<select class="form-control single purchaseCat" name="category_id[]">'+
                                   '<option value="">Select Category</option>'+
                                   '@foreach($categories as $category)'+
                                   '<option value="{{$category->id}}">{{$category->category_name}}</option>'+
                                   '@endforeach'+
                                '</select>'+
                            '</div>'+    
                         '</div>'
            $('.invoice_table').append(ttr);
        });
    });

我正在使用动态下拉菜单。如果您检查图像，您可以理解问题所在。当我这次添加新行时，foreach 不起作用

Answer 1

问题很可能是因为 @foreach 是一条 Laravel 指令，不会在 .js 文件中执行。

完成所需操作的简单方法是使用 clone() 复制现有行，然后将其追加到 DOM 需要的地方

$(document).ready(function() {
  $("form").on("click", ".addRow", function() {
    let $newRow = $('div.row:first').clone();
    $newRow.find('select.purchaseCat').val(''); // reset selected option to default
    $('.invoice_table').append($newRow);
  });
});

此外，作为问题的旁白，您似乎正在使用 div 元素来创建 table，这有点奇怪。请记住，对表格数据使用 table 元素是绝对有效和正确的。它只是使用表格进行布局，应该避免。

如何在js文件中使用foreach循环？

How can use foreach loop in js file?

javascript

jquery

laravel

laravel-8