laravelにドロップダウンボックスを動的に追加します。 Javascriptとlaravel

Question

ダイナミックドロップダウンを追加したい&テキストボックス。しかし、テキストボックスはOKです。私はドロップダウンで大丈夫ではない。データはDropdown.Iに含まれていません。ブレード内のデータを取得するループです。私のコードを記述しています。

form.blade.php

<div class="form-group"> 
       <label for="type">Gas Container Type</label> 
       <select class="form-control input-sm" name="gas" id="gas"> 
        @foreach($gass as $gas) 
         <option value="{{$gas->name}}">{{$gas->name}}</option> 
        @endforeach 


       </select><!-- end of Item_Drop_Down --> 
      </div> 
      <input name="name[]" type="text" id="name" class="name" placeholder="Input 1"> 
      <a href="#" id="add">Add More Input Field</a> 

master.blade.php

<script> 

$(document).ready(function() { 
    var e = document.getElementById("gas"); 

    $('#add').click(function() { 

     var inp = $('#box'); 

     var i = $('input').size() + 1; 

     $('<div id="box' + i + '">' + '' + 
       '<input type="text" id="name" class="name" name="name[]" placeholder="Input ' + i + '"/>' + '' + 
       '<select id="gas" name="gas[]" ' + i + '"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>') 
       .appendTo($('#box form')); 

     i++; 

    }); 

    {{--<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'value'"></select>--}} 

    $('body').on('click', '#remove', function() { 

     $(this).parent('div').remove(); 


    }); 


}); 

controller.php

public function store(Request $request) 
{ 

    foreach ($request->get('name') as $name) { 
     $kg = new WarehouseGasIn(); 
     $kg->kg = $name; 
     //dd($request->get('name')); 
     $kg->save(); 

    } 

Answer 1

<script> 


     $(document).ready(function() { 

      $('#add').click(function() { 

       var inp = $('#box'); 

       var i = $('input').size() + 1 - 2; 

       $('<div id=box' + i + '"><input type="text" id="name" class="name" name="name[0][]" placeholder="Input ' + i + '"/><select class="form-control input-sm" name="shop" id="shop"><option value="">{{"Shop"}}</option>@foreach($branches as $branch)<option value="{{$branch->id}}">{{$branch->name}}</option>@endforeach</select><select name="name[1][]" id="gas" ' + i + '>@foreach($gass as $gas) <option value="{{$gas->id}}">{{$gas->name}}</option>@endforeach</select><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo($('#box form')); 


       i++; 

      }); 


      $('body').on('click', '#remove', function() { 

       $(this).parent('div').remove(); 


      }); 


     }); 


    </script> 

Answer 2

これは、ものの一種であるあなたは達成しようとしている？

$(document).ready(function() { 
 
    var boxesWrap = $('#boxes-wrap'); 
 
    var boxRow = boxesWrap.children(":first"); 
 
    var boxRowTemplate = boxRow.clone(); 
 
    boxRow.find('button.remove-gas-row').remove(); 
 
    
 
    // nb can't use .length for inputCount as we are dynamically removing from middle of collection 
 
    var inputCount = 1; 
 

 
    $('#add').click(function() { 
 
    var newRow = boxRowTemplate.clone(); 
 
    inputCount++; 
 
    newRow.find('input.name').attr('placeholder', 'Input '+inputCount); 
 
    boxesWrap.append(newRow); 
 
    }); 
 
    
 
    $('#boxes-wrap').on('click', 'button.remove-gas-row', function() { 
 
    \t $(this).parent().remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="boxes-wrap"> 
 
    <div> 
 
    <div class="form-group"> 
 
     <label>Gas Container Type</label> 
 
     <select class="form-control input-sm" name="gas[]"> 
 
     <option value="gas-1">Container 1</option> 
 
     <option value="gas-2">Container 2</option> 
 
     </select><!-- end of Item_Drop_Down --> 
 
    </div> 
 
    <input name="name[]" type="text" class="name" placeholder="Input 1"> 
 
    <button class="remove-gas-row" type="button">Remove</button> 
 
    </div> 
 
</div> 
 

 
<a href="#" id="add">Add More Input Field</a>