$(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); }); });
Estoy usando un menú desplegable dinámico. Si miras la imagen puedes entender cuál es el problema. cuando agrego una nueva fila esta vez foreach no funcionó
Lo más probable es que los problemas se deban a que @foreach
es una instrucción de Laravel que no se ejecutará dentro de un archivo .js.
La forma simple de hacer lo que necesita es usar clone()
para copiar una fila existente y luego agregar () eso al DOM donde sea necesario
$(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); }); });
Además, como un aparte de la pregunta, parece que está usando elementos div
para crear una table
, lo cual es un poco extraño. Recuerde que es absolutamente válido y correcto usar un elemento de table
para datos tabulares. Solo se debe evitar el uso de tablas para el diseño.