My Dependent Dinamyc Dependent Dropdown didnt Work

Hy, I am trying create dynamic dependent product dropdown. but my dropdown didnt work.I managed to display the options from the first dropdown. but the options from the second dropdown that are based on first dropdown selected option do not appear.

here my database

here my sales.blade.php

<div class="fl">
<select class="form-control" name="produk" id="produk">
  <option value="0" disable="true" selected="true">-- PILIH PRODUK --</option>
  @foreach($produk as $key => $value)
    <option value=""> </option>
  @endforeach
</select>
</div>
<div class="fl">
<select class="form-control" name="blok" id="blok">
  <option value="0" disable="true" selected="true">-- PILIH TIPE PRODUK --</option>
</select>
</div>

<script type="text/javascript">
  $('#produk').on('change', function(e){
    console.log(e);
    var productID = e.target.value;
    $.get('/get-blok-list?productID=' + productID,function(data) {
      console.log(data);
      $('#blok').empty();
      $('#blok').append('<option value="0" disable="true" selected="true">-- PILIH TIPE PRODUK --</option>');

      $.each(data, function(index, blokObj){
        $('#blok').append('<option value="'+ blokObj.id +'">'+ blokObj.no_kavling +'</option>');
      })
    });
  });
  </script>

here my route

Route::get('/sales', 'SalesController@index');
Route::get('/get-blok-list', 'SalesController@getBlokList');

here my controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Product;
use App\Blok;

class SalesController extends Controller
{
  public function index()
  {
      $produk = Product::all();
      return view('sales',compact('produk'));
  }

  public function getBlokList(Request $request)
  {
      $productID = Input::get('productID');
      $blok = Blok::where('productID', '=', $productID)->get();
      return response()->json($blok);
  }
}