title: Laravel/Javascript: populate a select/dropdown after a different select/dropdown is selected
body: <p>I'm looking for a solution to populate a dropdown/select (e.g. called dropdown 2) upon selecting an option from another dropdown (e.g. dropdown 1).</p>
  
  <p>For example, selecting Toyota from dropdown 1 will then populate dropdown 2 with the models of a toyota e.g. Corolla, Camry etc. Or another example - picking a country in one dropdown will populate the different cities of that country in another dropdown. </p>
  
  <p>I'm using laravel as my framework, so it's important my solution (a) works within laravel and (b) grabs the results from a mysql database, not just a hardcoded array of values.</p>
  
  <p>I have tried to implement a solution from this post here: <a href="http://forums.laravel.io/viewtopic.php?pid=40028" rel="nofollow">http://forums.laravel.io/viewtopic.php?pid=40028</a></p>
  
  <p>But it's not working within my setup. This is what I have:</p>
  
  <p>My view looks like this:</p>
  
  <pre><code>{{ Form::open() }}
      &lt;select id="make" name="make"&gt;
          &lt;option&gt;Select Car Make&lt;/option&gt;
          &lt;option value="1"&gt;Toyota&lt;/option&gt;
          &lt;option value="2"&gt;Honda&lt;/option&gt;
          &lt;option value="3"&gt;Mercedes&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt;
      &lt;select id="model" name="model"&gt;
          &lt;option&gt;Please choose car make first&lt;/option&gt;
      &lt;/select&gt;
  {{ Form::close();}}
  </code></pre>
  
  <p>Then my route.php looks like this: </p>
  
  <pre><code>Route::get('api/dropdown', function(){
      $input = Input::get('option');
      $maker = Client::find($input);
      $models = $maker-&gt;projects();
      return Response::eloquent($models-&gt;get(array('id','name')));
  });
  </code></pre>
  
  <p>And finally, my script looks like this:</p>
  
  <pre><code>jQuery(document).ready(function($){
  $('#make').change(function(){
          $.get("{{ url('api/dropdown')}}", 
              { option: $(this).val() }, 
              function(data) {
                  var model = $('#model');
                  model.empty();
  
                  $.each(data, function(index, element) {
                      model.append("&lt;option value='"+ element.id +"'&gt;" + element.name + "&lt;/option&gt;");
                  });
              });
      });
  });
  </code></pre>
  
  <p>I'm currently getting a javascript error in my console:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 500 (Internal Server Error): http://localhost/test-project/api/dropdown?option=1
  Failed to load resource: the server responded with a status of 500 (Internal Server Error): http://localhost/test-project/%7B%7B%20url('api/dropdown')%7D%7D?option=1
  </code></pre>
  
  <p>I believe I have CSRF tokens on, which apparently may affect things - but I'm really not sure how to work with them so just telling me to fix that wont help, I really need a slight bit of detail on exactly how to fix that (if you think that is the problem).</p>
  
  <p>Alternatively, perhaps a modified or better solution would work better? I'm sure there are many better ways to implement this type of solution.</p>
  
  <p><strong>In summary, my question is: how can I fix my code above to work OR what is an alternate or better way to populate a dropdown list after an option is selected in another dropdown?</strong></p>
  
  <p>I have poured through what feels like hundreds of solutions but none seem to work for me and my laravel-ness!</p>
  
  <p><strong>Edit:</strong> </p>
  
  <p>Complete route looks like this:</p>
  
  <pre><code>Route::resource('clients', 'ClientsController');
  
  Route::resource('tasks', 'TasksController');
  
  Route::controller('rates', 'RatesController');
  
  Route::controller('projects', 'ProjectsController');
  
  Route::controller('users', 'UserManagementController');
  
  Route::controller('/', 'UsersController');
  
  Route::get('api/dropdown', function(){
      $input = Input::get('option');
      $maker = Client::find($input);
      $models = $maker-&gt;projects();
      return Response::eloquent($models-&gt;get(array('id','name')));
  });
  </code></pre>