problems in query with select nested on ajax request - ajax

Question

I hope you can help me! I am using this method to make a nested select but I can not find a solution, I will share the code of my project
I am trying to bring the id of the fruits through the controller and depending on those id, filter by ajax the varieties that are available
//in the view
<div class="col-md-4">
<div class="form-group">
{{ Form::label('fruit_id', 'Selecciona un tipo de fruta') }}
{{Form::select('fruit_id', $listFruits, null, ['class' => 'form-control',
'id'=>'fruits',
'required',
'placeholder'=>'Seleccione una opción'])}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="career" class="">Variedad de la fruta</label>
<select id="varieties" data-old="{{ old('variety_id') }}" name="variety_id" class="form-control{{ $errors->has('variety_id') ? ' is-invalid' : '' }}"></select>
#if ($errors->has('variety_id'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('variety_id') }}</strong>
</span>
#endif
{{ csrf_field() }}
</div>
</div>
//The script
<script>
//Select dinamico
$(document).ready(function(){
$('#fruits').on('change', function(){
var fruit_id = $(this).val();
if($.trim(fruit_id)!=''){
$.get('varieties', {fruit_id: fruit_id}, function(varieties){
$('#variety').empty();
$('#variety').append("<option value=''>Seleccione una opción</option>");
$.each(varieties,function(index, value){
$('#variety').append("<option value='"+index+"'>"+value+"</option>");
});
});
}
});
});
</script>
´´´
in the console of browser
jquery.min.js:2 GET http://127.0.0.1:8000/receptions/varieties?fruit_id=2