Laravel 5 multi dynamic dropdown

I'm trying to use the data of the first dropdown, to fill the second. An example here: https://gitlab.com/Bons/laravel5.3_dynamic_dropdown/blob/master/readme.md

Controller functon return data, but second dropdown is empty.

First dropdown:

<span>Country: </span>
<select style="width: 200px" class="country" id="id_country">
    <option value="0" disabled="true" selected="true">-Select-</option>
    @foreach($countries as $contry)
        <option value=""></option>
    @endforeach
</select>

linked dropdown:

  <label>City
        <select id="region" class="form-control input-sm" name="region_id">
            <option value=""></option>
        </select>
    </label>

Script:

   <script type="text/javascript">
        $(document).ready(function(){
            $(document).on('change','.country',function(){
                console.log("hmm its change");
                var id=$(this).val();
                console.log(id)
                $.ajax({
                    type:'get',
                    url:'{!!URL::to('findRegions')!!}',
                    data:{'id':id},
                    success:function(data) {
                        console.log("success");
                        console.log(data.length);
                        console.log(data);
                        $.each(data, function(index,subCatObj){
                        //    console.log(subCatObj.name)
                            $('#region').append(''+subCatObj.name+'');
                        });
                    },
                    error:function(){
                        console.log("error");
                    }
                });
            });  
        });  
    </script>

Route:

Route::get('/findRegions/','GirlsController@findRegions');

Controller function:

public function findRegions(Request $request){
    $id=$request->id;
    $regions=Region::select('name')
        ->where('id_country',$id)
        ->get();
  dump($regions);
  return $regions;
}

via Chebli Mohamed