title: How to create dynamic select option in laravel?
body: <p>I want to generate a list on items in a drop down based on a previous choice from another select. All items ar in the database.</p>
  
  <p>Here is what I did:</p>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function () {
      $(document).on('change', '#province_name', function() {
          var province_id = $(this).val();
          var div = $(this).parent();
          var op = " ";
          $.ajax({
              type: 'get',
              url: '{!!URL::to('admin/findIDProvince')!!}',
              data: {'id':province_id},
              success: function(data){
                  for (var i = 0; i &lt; data.length; i++){
                      op += '&lt;option value="'+data[i].id+'"&gt;'+data[i].city_name+'&lt;/option&gt;';
                  }
                  div.find('#city_name').html(" ");
                  div.find('#city_name').append(op);
              },
              error: function(){
                  console.log('success');
              },
          });
      });
  });
  </code></pre>
  
  <p>Routes (web.php):</p>
  
  <pre><code>Route::namespace('Admin')-&gt;prefix('admin')-&gt;middleware('auth')-&gt;group(function (){
      $this-&gt;get('/findIDProvince', 'SchoolsListController@findIDProvince');
  });
  </code></pre>
  
  <p>Controller (Admin/SchoolsListController.php):</p>
  
  <pre><code>public function findIDProvince(Request $request)
      {
          $data = City::select('city_name', 'id')-&gt;where('province_id', $request-&gt;id)-&gt;take(100)-&gt;get();
          return response()-&gt;json($data);
      }
  </code></pre>
  
  <p>HTML (view.blade.php)</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="col-md-3" for="province_name"&gt;province_name&lt;/label&gt;
      &lt;div class="col-md-9"&gt;
          &lt;select id="province_name" name="province_name" class="form-control col-md-12" required&gt;
              @foreach($province_names as $province_name)
                  &lt;option value="{{ $province_name-&gt;id }}"&gt;{{ $province_name-&gt;province_name }}&lt;/option&gt;
              @endforeach
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-md-3" for="city_name"&gt;city_name&lt;/label&gt;
      &lt;div class="col-md-9"&gt;
          &lt;select id="city_name" name="city_name" class="form-control col-md-12" required&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>