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

Question

注意:问题已部分解决。现在生成 <option> 的循环中出现错误元素。更多信息在这篇文章的底部。任何为这个新问题提供解决方案的人仍将获得赏金。

注2:问题已解决，选择的解决方案是针对循环中的错误，为了完整性，我在下面发布了原始问题的解决方案。

<小时/>

我的表单使用 Laravel 5.7 和 laravelcollective/html。

我正在尝试创建一个页面，用户可以在其中创建订单并向其中添加产品。用户必须能够按下带有 + 的按钮登录以添加更多产品。

数量的常规数字输入很简单，我可以使用 jQuery 附加它，如下所示:

$(function() {
  $('#addMoreProducts').click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<div class='col-sm-6'>");
    $("#fieldList").append("<div class='form-group'>");
    $("#fieldList").append("<label for='quantity[]'>Quantity</label>");
    $("#fieldList").append("<input class='form-control' placeholder='Quantity' name='quantity[]' type='number'>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但我无法弄清楚如何添加 <select>动态输入数据库中的记录。这些是我需要“复制”的字段。

<div class="row" id="fieldList">
   <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 class="form-group">
  <a id="addMoreProducts" class="btn btn-block btn-default">+</a>
</div>

产品信息通过 Controller 传入。

我尝试附加 <select>输入也会显示，但选项当然不在那里。

$(function() {
  $('#addMoreProducts').click(function(e) {
    e.preventDefault();
    $("#fieldList").append("<div class='row' id='fieldlist'>");
    $("#fieldList").append("<div class='col-sm-6'>");
    $("#fieldList").append("<div class='form-group'>");
    $("#fieldList").append("<label for='product_id[]'>Product</label>");
    $("#fieldList").append("<select id='select2' class='form-control select2' name='product_id[]'><option selected='selected' value=''>Product</option></select>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("<div class='col-sm-6'>");
    $("#fieldList").append("<div class='form-group'>");
    $("#fieldList").append("<label for='quantity[]'>Quantity</label>");
    $("#fieldList").append("<input class='form-control' placeholder='Quantity' name='quantity[]' type='number'>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
    $("#fieldList").append("</div>");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何添加额外的 <select>输入，同时保持它由我的数据库中的行填充？

不熟悉 AJAX，但是这是我需要它的场景吗？非常感谢任何建议。

编辑:这是产品表:

id|名称|描述|product_category_id|supplier_id|sales_price|buy_price|instock|停产

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->mediumText('description');
        $table->integer('product_category_id')->unsigned();
        $table->integer('supplier_id')->unsigned();
        $table->decimal('sales_price', 8, 2);
        $table->decimal('buy_price', 8, 2);
        $table->boolean('instock');
        $table->boolean('discontinued');

        $table->foreign('product_category_id')->references('id')->on('product_categories')->onDelete('cascade');
        $table->foreign('supplier_id')->references('id')->on('suppliers')->onDelete('cascade');

        $table->timestamps();
    });
}

生成的示例 <select>应该看起来像:

<select id="select2" class="form-control select2" name="product_id[]">
  <option selected="selected" value="">Product</option>
  <option value="1">Windows 10 License</option>
  <!-- etc... -->
</select>

<小时/>

部分解决方案:

我使用此代码来传递 $products变量，以便我的 js 文件可以访问它:

<script>
  var products = {!! json_encode($products->toArray(), JSON_HEX_TAG) !!};
</script>

像这样测试，使用 <select> 中的一种产品:

/* 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 */
i = 0;
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);
        $('.select2').select2();
    });
});

这工作正常并产生所需的结果。 但我需要循环生成选项部分。我尝试这样做:

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

这会引发错误:

TypeError: products[i] is undefined

这就是products变量包含:

Answer 1

我认为问题出在 for 语句上，试试这个:

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