title: dependent dropdown in laravel
body: <p>i need a dependent dropdown in my laravel project, so i was trying with the below code which gives me <strong>500 internal server error</strong>. in the first select box the values are displayed from the database but when i select one, the second select box does not display any value. </p>
  
  <p>in the routes</p>
  
  <pre><code>Route::get('/', function () {
  $categories = Category::all();
  
  return view('welcome')-&gt;with('categories', $categories);
  });
  
  Route::get('ajax-subcat/{id}', 'Controller@ajaxcall');
  </code></pre>
  
  <p>in my controller</p>
  
  <pre><code>&lt;?php
  
   namespace App\Http\Controllers;
  
   use Illuminate\Foundation\Bus\DispatchesJobs;
   use Illuminate\Routing\Controller as BaseController;
   use Illuminate\Foundation\Validation\ValidatesRequests;
   use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
   use Illuminate\Foundation\Auth\Access\AuthorizesResources;
  
   class Controller extends BaseController
   {
     //use AuthorizesRequests, AuthorizesResources, DispatchesJobs, ValidatesRequests;
  
      public function ajaxcall($id){
      $subcategories = Subcategory::where('category_id', '=', $id)-&gt;get();
      return Response::json($subcategories);
       }
   }
  </code></pre>
  
  <p>in model Category</p>
  
  <pre><code>&lt;?php
   namespace App;
  
   use Illuminate\Database\Eloquent\Model;
  
   class Category extends Model
   {
  
      protected $fillable = ["name"]; 
    }
  </code></pre>
  
  <p>in model Subcategory</p>
  
  <pre><code>&lt;?php
  
  namespace App;
  
  
  
  use Illuminate\Database\Eloquent\Model;
  
  class Subcategory extends Model
  {
     protected $fillable = ["name", "category_id" ];
  
  }
  </code></pre>
  
  <p>in View :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Laravel&lt;/title&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:100"        rel="stylesheet" type="text/css"&gt;
      &lt;script&gt; src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
  
     &lt;!-- &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;--&gt;
         &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
  
      {{Form::open(array('url'=&gt;' ', 'files'=&gt;true))}}
          &lt;label&gt;Categories&lt;/label&gt;
          &lt;select class="form-control input-sm" name="category" id="category"&gt;
  
              @foreach ($categories as $category)
                  &lt;option value="{{$category-&gt;id}}"&gt; {{$category-&gt;name}}     &lt;/option&gt;
              @endforeach
  
          &lt;/select&gt;
  
  
      &lt;div class="form-group"&gt;
      &lt;label&gt;SubCategories&lt;/label&gt;
      &lt;select class="form-control input-sm" name="subcategory"    id="subcategory"&gt;
              &lt;option value="  "&gt;&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
     $.ajaxSetup({
     headers: {
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
     });
      $('#category').on('change', function(e){
          console.log(e);
  
          var category_id = e.target.value;
  
          //ajax
          $.get('ajax-subcat/' + category_id, function(data){
              console.log(data);
  
                  $('#subcategory').empty();
  
              $.each(data, function(index, subcatObj){
  
                  $('#subcategory').append('&lt;option value ="'+ subcatObj.id +'"&gt;'+subcatObj.name+'&lt;/option&gt;');
  
              });
          });
      });
  &lt;/script&gt;
  
  
          {{Form::close()}}
          &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>