dynamic Dropdown di laravel tidak berhasil

saya mencoba membuat ddropdown dinamis menggunakan ajax, namun ketika saya klik, data tidak terload.

view

<div class="row mb-3">
                                    <label  for="validationDefault01" class="col-sm-3 col-form-label">Kategori Barang</label>
                                    <div class="col-sm-9">
                                        <select class="productcategory" id="cat_id" name="productcategory" aria-label="Default select example" required>
                                            <option  value="0" disabled="true" selected="true">Pilih Kategori Barang </option>
                                            @foreach ($perangkat as $data)
                                              <option  value="{{$data->cat_id}}">{{$data->device_cat}} </option>
                                                @endforeach
                                        </select>

                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label  for="validationDefault01" class="col-sm-3 col-form-label">Nama Barang</label>
                                    <div class="col-sm-9">
                                        <select class="productname" style="width: 100%;">
                                            <option value="0" disabled="true" selected="true">Pilih Nama Barang</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label  for="validationDefault01" class="col-sm-3 col-form-label">tipe</label>
                                    <div class="col-sm-9">
                                        <select class="prod_price"  style="width: 100%;">
                                            <option value="0" disabled="true" selected="true">Pilih Tipe Barang</option>
                                        </select>
                                    </div>
                                </div>

ajax

<script type="text/javascript">
    $(document).ready(function(){

        $(document).on('change','.productcategory',function(){
             console.log("hmm its change");

            var cat_id=$(this).val();
             console.log(cat_id);
            var div=$(this).parent();

            var op=" ";

            $.ajax({
                type:'get',
                url:'{!!URL::to('findProductName')!!}',
                data:{'cat_id':cat_id},
                dataType:'json',
                success:function(data){
                    console.log('success');

                    console.log(data);

                    //console.log(data.length);
                    op+='<option value="0" selected disabled>chose product</option>';
                    for(var i=0;i<data.length;i++){
                    op+='<option value="'+data[i].device_name+'">'+data[i].dev_name+'</option>';
                   }

                   div.find('.productname').html(" ");
                   div.find('.productname').append(op);
                },
                error:function(){

                }
            });
        });

        $(document).on('change','.productname',function () {
            var prod_id=$(this).val();

            var a=$(this).parent();
            console.log(prod_id);
            var op="";
            $.ajax({
                type:'get',
                url:'{!!URL::to('findType')!!}',
                data:{'id_name':prod_id},
                dataType:'json',//return data will be json
                success:function(data){
                    //console.log('success');

                    console.log(data);

                    //console.log(data.length);
                    op+='<option value="0" selected disabled>chose product</option>';
                    for(var i=0;i<data.length;i++){
                    op+='<option value="'+data[i].type_id+'">'+data[i].tipe+'</option>';
                   }

                   div.find('.prod_price').html(" ");
                   div.find('.prod_price').append(op);
                },
                error:function(){

                }
            });

        });

    });
</script>

route

Route::get('/findProductName','PerangkatController@findProductName')->name('findProductName');
Route::get('/findType','PerangkatController@findPrice')->name('findType');

controller

   public function create()
    {
        $perangkat = KategoriBarang::select('device_cat.device_cat', 'device_cat.cat_id')->join('stdevice',  'stdevice.cat_id', '=', 'device_cat.cat_id' ) //field device_cat yang ada ditabel device_cat
        ->join('location_details', 'stdevice.id', '=', 'location_details.id')
        ->where('location_details.stdev_id','65')
        ->distinct('cat_id')
        ->orderBy('device_cat', 'ASC') // field cat_id yang yg ada di stdevice supaya perulangan duplicat nya dihapus
        ->get();

        $prod=KategoriBarang::all();

        return view('Perangkat.create', compact('perangkat','prod'));
    }


 public function findProductName(Request $request){

        $data=NamaBarang::select('dev_name','device_name', 'cat_id')->where('cat_id',$request->cat_id)->take(100)->get();
        return response()->json($data);//then sent this data to ajax success

    }

    public function findPrice(Request $request){

        //it will get price if its id match with product id
        $p=TipeBarang::select('type_id', 'tipe')->where('id_name',$request->id_name)->take(100)->get();
        return response()->json($p);
    }

hasilnya ketika klik kategori, pilihan nama barang tidak tampil.

diconsole log

<blockquote class="imgur-embed-pub" lang="en" data-id="a/RaFje19" data-context="false" ><a href="//imgur.com/a/RaFje19"></a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>