如何在javascript和laravel中获取动态下拉列表/选择框字段的列表？

Question

我正在使用laravel 5.2，并且有一个更新表格modal / popup，其中有一个动态下拉列表字段，可以添加或删除它。 我的问题是下拉列表仅在第一行中起作用，添加更多下拉列表后，它没有显示列表，因为我不知道如何在JavaScript中放置foreach。 以下是刀片视图中的代码。 第二个是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

首先使按钮添加类不是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);

});