Question

我能够使用选择框创建一个动态表单（当您在表单上选择AddItem按钮时，将添加一行以及一些字段，并且还会包含一个dropbox）。 Dropbox的选项是硬编码的。我想要的是从数据库中获取选项。我怎样才能做到这一点？

<script>
$(document).ready(function() {

var i = 0;
      $('#add_jobitem').click(function(){
        i++;
        $('#jobitem tr:last').after('<tr>'+
          '<td>'+
              '<select name="jobitem_name[] id=jobitem_name['+i+']">'+
                '<option value="Item1">Item1</option>'+
                '<option value="Item2">Item2</option>'+
                '<option value="Other">Other</option>'+
              '</select>'+
          '</td>'+
          '<td><input name="jobitem_description[]" id="jobitem_description['+i+']" class="jobitem_description" placeholder="Description"></td>'+
          '<td><input name="jobitem_qty[]" id="jobitem_qty['+i+']" class="jobitem_qty" placeholder="Qty" oninput="calculate_jobitem_total()" onchange="calculate_jobitem_total()"></td>'+
          '<td><input name="jobitem_each_price[]" id="jobitem_each_price['+i+']" class="jobitem_each_price" placeholder="Each Price" oninput="calculate_jobitem_total()" onchange="calculate_jobitem_total()"></td>'+
          '<td><input name="jobitem_total[]" id="jobitem_total['+i+']" class="jobitem_total" placeholder="Total"></td>'+
          '<td>'+
          '<select name="jobitem_vendor[] id=jobitem_vendor['+i+']">'+
            '<option value="Vendo1">Vendor1</option>'+
            '<option value="Vendo2">Vendor2</option>'+
          '</select>'+
          '</td>'+
          '<td><input name="jobitem_po_number[]" id="jobitem_po_number['+i+']" class="jobitem_po_number" placeholder="PO Number"></td>'+
        '</tr>');
       });
  });
</script>

我需要的是通过数据库填充jobitem_vendor []

Answer 1

要从数据库中获取选项，请将它们从控制器传递到视图：

$options = Item::all()->sortby('name', SORT_NATURAL | SORT_FLAG_CASE)->pluck('name', 'id');

将此变量传递给您的视图：

return view('jobs.index', ['options' => $options]);

在你的javascript中：

var options = {!! json_encode($options) !!};

然后，您可以在构建选择字段时使用数据库中的选项。

Answer 2

如果您使用的是laravelcollective / html，则可以将其直接添加到JS脚本中

{!! Form::select('jobitem_name[]', App\JobItem::pluck('name', 'id') ) !!}

在您的JavaScript中：

<script>
$(document).ready(function() {

var i = 0;
      $('#add_jobitem').click(function(){
        i++;
        $('#jobitem tr:last').after('<tr>'+
          '<td>'+
              '{!! Form::select('jobitem_name[]', App\JobItem::pluck('name', 'id') ) !!}'+
          '</td>'+
          '<td><input name="jobitem_description[]" id="jobitem_description['+i+']" class="jobitem_description" placeholder="Description"></td>'+
          '<td><input name="jobitem_qty[]" id="jobitem_qty['+i+']" class="jobitem_qty" placeholder="Qty" oninput="calculate_jobitem_total()" onchange="calculate_jobitem_total()"></td>'+
          '<td><input name="jobitem_each_price[]" id="jobitem_each_price['+i+']" class="jobitem_each_price" placeholder="Each Price" oninput="calculate_jobitem_total()" onchange="calculate_jobitem_total()"></td>'+
          '<td><input name="jobitem_total[]" id="jobitem_total['+i+']" class="jobitem_total" placeholder="Total"></td>'+
          '<td>'+
          '<select name="jobitem_vendor[] id=jobitem_vendor['+i+']">'+
            '<option value="Vendo1">Vendor1</option>'+
            '<option value="Vendo2">Vendor2</option>'+
          '</select>'+
          '</td>'+
          '<td><input name="jobitem_po_number[]" id="jobitem_po_number['+i+']" class="jobitem_po_number" placeholder="PO Number"></td>'+
        '</tr>');
       });
  });
</script>

带动态选择框的动态表格 - Laravel

2 个答案: