如何在JavaScript和Laravel中获取动态下拉/Selectbox字段的列表

Question

我正在使用laravel 5.2，并且我有一个更新表单模态/弹出窗口，该模态/弹出窗口具有动态的下拉字段，可以添加更多或删除它。我的问题是仅在第一行中工作的下拉列表，在我添加了更多下拉列表后，它没有显示其中的列表，因为我不知道如何将foreach放入JavaScript中。以下是刀片视图中的代码。第二个是JavaScript中的代码，以添加更多行/下拉次数。你知道怎么吗？

<table class="table table-bordered" id="dynamic_field">
    <tbody id="tbodpengikut">
        <tr> 
            <td>
                <select class="selectpicker form-control" id="id_add_pengikut" name="id_add_pengikut[]" data-live-search="true" style="width:100%">
                    <option value=""> --Silahkan Pilih-- </option>
                    @foreach($getPengikut as $getPngkt) 
                        <option value="{{ $getPngkt->KODE }}"> {{ $getPngkt->DESKRIPSI }} </option> 
                    @endforeach
                </select>   
            </td>
            <td>
                <button type="button" name="add" id="add" class="btn btn-success"><b>+</b></button>
            </td>
        </tr>
    </tbody>
</table> 

这是JavaScript：

var i=1;  
$('#add').click(function(){  
    i++;  
    $('#dynamic_field').append(
       '<tr id="row'+i+'" class="dynamic-added">
           <td>
                <select class="form-control" id="add_pengikut_id" name="add_pengikut_id" data-live-search="true" style="width:100%"> 
                    <option value=""> --Silahkan Pilih-- </option> 
                </select>
           </td>
           <td>
                <button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button>
           </td>
       </tr>'
    );  
});

Answer 1

首先制作 add 类别不id

<button type="button" name="add"  class="add btn btn-success"><b>+</b></button>

那么您的JavaScript就像

$('table#dynamic_field').on('click','button.add', function (e) {
   var newRow =  $(this).parent().parent().clone();
   $('table#dynamic_field tbody').append(newRow);
});