使用从数据库填充的选择动态生成表单行

Question

这是我的困境。在Laravel中，我将inspections传递给视图，如下所示：

$inspections = Inspection::where("status", "!=", "started")->get();
return View::make('process')->with("inspections", $inspections);

Inspections包含通过开始阶段的所有Inspections的列表。在视图中，我创建了一个表单来处理这些检查：

<tr id="row_0" data-row="0">
  <td>
    <select class="form-control input-sm" name="inspection[0]">
      <option value=""></option>
      @foreach($inspections AS $inspection)
      <option value="{{ $inspection->id }}">{{ $inspection->submission_number }} - {{ $inspection->policy_number }} - {{ $inspection->location_address }}</option>
      @endforeach
    </select>
  </td>
  <td><label class="radio-inline"><input type="radio" name="received[0]" value="yes" >Yes</label><label class="radio-inline"><input type="radio" name="received[0]" value="no" >No</label></td>
  <td><label class="radio-inline"><input id="i_on_0" type="radio" name="invoiced[0]" value="yes" onclick="toggleInvoice(this);" data-row="0"/>Yes</label><label class="radio-inline"><input id="i_off_0" type="radio" name="invoiced[0]" value="no" onclick="toggleInvoice(this);" data-row="0"/>No</label></td>
  <input type="hidden" id="in_0" name="invoice_number[0]" disabled/>
  <td><input type="text" id="ia_0" name="invoice_amount[0]" class="form-control input-sm" disabled/></td>
  <td><label class="radio-inline"><input type="radio" id="p_on_0" name="paid[0]" value="yes" disabled/>Yes</label><label class="radio-inline"><input type="radio" id="p_off_0" name="paid[0]" value="no" disabled/>No</label></td>
</tr>

创建以下内容：

这很好，花花公子，但我不知道如何将另一行添加到此表中，仍然显示每个选项的值。现在，我用我的+按钮在Javascript中调用以下函数：

function appendProcessingRow(){
  var current_row = $("#processing_table tr:last").attr("data-row");
  var content = '<tr id="row_' + (parseInt(current_row) + 1) + '" data-row="' + (parseInt(current_row) + 1) + '"><td><input type="text" name="policy_number[' + (parseInt(current_row) + 1) + ']" class="form-control input-sm"/></td><td><label class="radio-inline"><input type="radio" name="received[' + (parseInt(current_row) + 1) + ']" value="yes">Yes</label><label class="radio-inline"><input type="radio" name="received[' + (parseInt(current_row) + 1) + ']" value="no"> No</label></td><td><label class="radio-inline"><input type="radio" name="invoiced[' + (parseInt(current_row) + 1) + ']" value="yes" onclick="toggleInvoice(this);" data-row="' + (parseInt(current_row) + 1) + '"/> Yes</label><label class="radio-inline"><input type="radio" name="invoiced[' + (parseInt(current_row) + 1) + ']" value="no" onclick="toggleInvoice(this);" data-row="' + (parseInt(current_row) + 1) + '"/> No</label></td><input type="hidden" id="in_' + (parseInt(current_row) + 1) + '" name="invoice_number[' + (parseInt(current_row) + 1) + ']" disabled/>><td><input type="text" id="ia_' + (parseInt(current_row) + 1) + '" name="invoice_amount[' + (parseInt(current_row) + 1) + ']" class="form-control input-sm" disabled/></td><td><label class="radio-inline"><input type="radio" id="p_on_' + (parseInt(current_row) + 1) + '" name="paid[' + (parseInt(current_row) + 1) + ']" value="yes" disabled/> Yes</label><label class="radio-inline"><input type="radio" id="p_off_' + (parseInt(current_row) + 1) + '" name="paid[' + (parseInt(current_row) + 1) + ']" value="no" disabled/> No</label></td></tr>';
  $('#processing_table > tbody:last').append(content);
}

哪个有效，但会创建<input>标记而不是select选项。请参阅以下内容：

我的问题是，如何在Javascript中创建相同的行布局，请记住选择是由Laravel中的@foreach生成的？试过把：

<select class="form-control input-sm" name="inspection[0]">
  <option value=""></option>
  @foreach($inspections AS $inspection)
  <option value="{{ $inspection->id }}">{{ $inspection->submission_number }} - {{ $inspection->policy_number }} - {{ $inspection->location_address }}</option>
  @endforeach
</select>

在Javascript中appendProcessingRow()并且它已经工作了＃34;在某种程度上，但价值不在那里：

所以，任何帮助将不胜感激。在此先感谢，对不起这篇长篇文章感到抱歉。

Answer 1

如果没有“完整的ajax”从服务器获取选项，我认为克隆现有行是最简单的方法。

function appendProcessingRow(){
    var lastRow = $("#processing_table tr:last");
    var newRow = lastRow.clone();
    var newId = parseInt(lastRow.data('row'))+1;
    newRow.data('row', newId);
    newRow.prop('id', newId);
    newRow.find('select').prop('selectedIndex', 0);

    // reset other inputs in a similar fashion

    lastRow.after(newRow);
}

另外关于你的输入名称......你应该能够像policy_number[]一样将它们全部留下而没有索引。它会自动将值放在一个数组中（按它们在html中出现的顺序）