帶動態選擇框的動態表單-Laravel

Question

我能夠使用選擇框創建一個動態表單（當您選擇表單上的AddItem按鈕時，將在其中添加一行以及一些字段，並且其中還包括一個保管箱）。 投寄箱的選項是硬編碼的。 我正在嘗試的是從數據庫中獲取選項。 我怎樣才能做到這一點？

<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>