Question

注意：问题已部分解决。现在，在循环中会产生一个错误，以生成

Answer 1

我认为问题出在 for 语句上，请尝试以下操作：

for (var i = 0; i < products.length; i++) {
    input_select += "       <option value='" + products[i].id + "'>" + products[i].name + "</option>";
}

Answer 2

对于那些试图实现相同/相似目的的人，只需将完整的解决方案留在这里。

您需要通过像这样的小脚本将数据从控制器传递到视图和javascript文件：

<script>
  // $products is passed in through the controller
  var products = {!! json_encode($products->toArray(), JSON_HEX_TAG) !!};
</script>

然后，创建一个javascript文件，并为要附加的输入创建模板文字。

/* Generate standard input */
input_select = `
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="product_id[]">Product</label>
                <select id="select2" class="form-control select2" name="product_id[]">
                <option selected="selected" value="">Product</option>
`;

/* generate options */
for (var i = 0; i < products.length; i++) {
    input_select += "       <option value='" + products[i].id + "'>" + products[i].name + "</option>";
}

/* Close standard input */
input_select += `
                </select>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="quantity[]">Quantity</label>
                <input class="form-control" placeholder="Quantity" name="quantity[]" type="number" value="" id="quantity[]">
            </div>
        </div>
    </div>
`;

/* append function */
$(function() {
    $('#more').click(function(e) {
        e.preventDefault();
        $("#fieldlist").append(input_select);

        /*
         *
         * Note: I use select2, if you don't, remove this line.
         *
         */
        $('.select2').select2();

    });
});

然后在您的视图中，将要追加到其上的输入包装在id为#fieldlist的div中（或任何您想要的内容，请确保也在js文件中进行更改）

<div id="fieldlist">

  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        {{Form::label('product_id[]', 'Product')}}
        {{Form::select('product_id[]', $products->pluck('name', 'id'), null, ['id' => 'select2', 'class' => 'form-control select2', 'placeholder' => 'Product'])}}
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        {{Form::label('quantity[]', 'Quantity')}}
        {{Form::number('quantity[]', '', ['class' => 'form-control', 'placeholder' => 'Quantity'])}}
      </div>
    </div>
  </div>

</div>

最后，对于按钮：

<div class="form-group">
  <a id="more" class="btn btn-block btn-default">+</a>
</div>

动态添加由数据库记录填充的<select>输入

2 个答案: