Javascript 如何在laravel中添加具有依赖下拉列表的行

您好，我一直停留在这里，我正在创建Addrow（+），如果我单击此按钮，它将添加一行，我们单击了多少次。这些行由两个下拉框组成，其中第一个来自数据库值，第二个依赖于第一个框。我完全被卡住了。我对拉雷维尔很陌生，我不知道该怎么做。我知道我已经做了多少

$（'.addRow'）。在（'click'，function（）上{
addRow（）；
var i=1；
});
函数addRow（）{
i++；
var tr=''+
''+                     
''+
“选择服务类型”+
@foreach（$services as$service）
“{{$service->service_type}”+
@endforeach
''+                        
''+
''+
''+
'选择服务名称'+
''+
''+
''+
“选择会话”+
''+
''+
'-'+
'';
$（'tbody'）。追加（tr）；
};
i=1；
$（'tbody'）。在（'click'，'remove'，函数（）上{
$（this.parent（）.parent（）.remove（）；
});
$（文档）.ready（函数（）{
$（'.dynamic'）.change（函数（）{
if（$（this.val（）！=“”）
{
var select=$（this.attr（“id”）；
var值=$（this.val（）；
var dependent=$（this）.data（'dependent'）；
var_-token=$（'input[name=“_-token”]”）。val（）；
$.ajax({
url:“{route（'StandardPackageController.fetch'）}”，方法：“POST”，数据：{select:select，value:value，_-token:_-token，dependent:dependent}，
成功：功能（结果）
{
$（'#'+相关）.html（结果）；
}
})
}
});
});

这些是我的脚本，用于动态添加行和获取数据依赖项下拉列表

---

如图所示，第一行工作正常，但第二行和其他行工作正常。这就是问题所在。

请共享您的Laravel控制器和型号。具体问题是什么？我的做法就像我有一个页面，当我单击+按钮时添加了行，并且在该行中有依赖的下拉列表。我将共享代码.查看我的更新版本我想你不想设置

var i=1每次单击“添加行”按钮时。
<script type="text/javascript">
  $('.addRow').on('click',function(){
    addRow();
    var i=1;
  });

  function addRow(){
    i++; 
    var tr = '<tr id="row'+i+'">'+
                    '<td>'+                     
                    '<select class="form-control input-lg dynamic" name="service_type[]" id="service_type" data-parsley-required="true" data-dependent="service_name">'+
                                '<option value="">Select Service Type</option>'+
                                @foreach ($services as $service )
                                  '<option value="{{ $service->service_type }}">{{ $service->service_type }}</option>'+
                                @endforeach
                              '</select>'+                        

                            '</td>'+
                  '<td>'+
                      '<select class="form-control input-lg dynamic" name="service_name[]" id="service_name" data-parsley-required="true">'+
                        '<option value="">Select Service name</option>'+
                      '</select>'+
                    '</td>'+
                  '<td><select class="form-control" name="service_sess[]" id="service_sess" data-parsley-required="true">'+
                                '<option value="">Select Sessions</option>'+
                                '<?php 

                                    for($i=0; $i<=20; $i++)
                                    {

                                        echo "<option value=".$i.">".$i."</option>";
                                    }
                                   ?>'+
                              '</select></td>'+
                  '<td><a href="#" class="btn btn-danger remove">-</td>'+
                '</tr>';
              $('tbody').append(tr);

  };
  i=1;
  $('tbody').on('click','.remove',function(){
    $(this).parent().parent().remove();
  });

</script>
<script type="text/javascript">
  $(document).ready(function(){
       $('.dynamic').change(function(){
        if($(this).val() != '')
        {
          var select = $(this).attr("id");
          var value = $(this).val();
          var dependent = $(this).data('dependent');
          var _token = $('input[name="_token"]').val();
          $.ajax({
            url:"{{ route('StandardPackageController.fetch') }}",method:"POST",data:{select:select,value:value,_token:_token,dependent:dependent},
            success:function(result)
            {
              $('#'+dependent).html(result);
            }
          })
        }


    });

  });


</script>