基于Jquery行索引的选择列表填充

Question

我使用以下代码在html表中创建动态字段：

$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><select class="form-control dynamic" id="governorate" name="governorate[]" data-dependent="destination">@if ($Governorate->count()) @foreach($Governorate as $gov)<option value={{$gov->governorate}}>{{$gov->governorate}}</option>@endforeach @endif                                          </select></td>            <td><select class="form-control" id="destination" name="destination[]"></select></td></tr>');  

      });

​

它包含两个下拉选择列表省和目的地，其中在选择first之后填充second。它工作得很好。

我只想填充基于行索引的第二个列表，当前只有第一行选择列表在任何行的第一个列表更改后重新填充。

$('table').on('change', '.dynamic', 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('dynamicdependent.fetch') }}",
    method:"POST",
    data:{select:select, value:value, _token:_token, dependent:dependent},
    success:function(result)
    {
     $('#'+dependent).html(result);
    }

   });
  }
 });

Answer 1

通过以下方式添加行索引即可解决此问题：

$('table').on('change', '.dynamic', function() {
var row = $(this).closest('tr');

  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('dynamicdependent.fetch') }}",
    method:"POST",
    data:{select:select, value:value, _token:_token, dependent:dependent},
    success:function(result)
    {
     $('#'+dependent,row).html(result);
    }
    }

   });
  }
 });