Laravel цепочка выпадающего выбора с помощью jquery ajax

Question

Я использую laravel 5.6 и сделал выпадающий выбор, но он не сработал. Я выбрал провинцию в выпадающем меню, но в меню города не отображались данные городов. Это мой контроллер:

public function province()
      {
        $prov = Province::orderBy("provinsi.id","ASC")
                        ->pluck("name","id");
        return view('auth.register',compact('prov')); 
      }

public function cities($id)
      {
        $city = City::where("id_provinsi","=",$id)
                      ->pluck("city_name","id");
        return json_encode($city);
      }

Это мой маршрут:

Route:: get('/register', 'Auth\RegisterController@province');
Route:: get('/register/cities/{id}', 'Auth\RegisterController@cities');

Это мой взгляд:

<div class="form-group row">

 <label for="prov" class="col-md-4 col-form-label text-md-right">{{ __('Provinsi') }}</label>

  <div class="col-md-6">
    <select name="prov" class="form-control">
        <option value="">=== Choose Province ===</option>
          @foreach ($prov as $key=>$value)                               
             <option value="{{$key}}">{{$value}}</option>                                    
          @endforeach
      </select>
       </div>
        </div>
 <div class="form-group row">
   <label for="city" class="col-md-4 col-form-label text-md-right">{{ __('City') }}</label>
  <div class="col-md-6">
   <select name="cities" class="form-control"> </select>
    </div>
     </div>

Это мой JavaScript:

<script type="text/javascript">

  $(document).ready(function()
  {
      $('select[name="prov"]').on('change', function() {
          var provID = $(this).val();
          if(provID) {
              $.ajax({
                  url: '/register/cities/'+provID,
                  type: "GET",
                  dataType: "json",
                  success:function(data) {                      
                      $('select[name="cities"]').empty();
                      $.each(data, function(key, value) {
                          $('select[name="cities"]').append('<option value="'+ key +'">'+ value +'</option>');
                      });
                  }
              });
          }else{
              $('select[name="cities"]').empty();
          }
      });
  });

</script>

Я получу данные JSON, если открою URL / регистр / города / (любой идентификатор провинции).

Answer 1

Убедитесь, что ответ возвращен в

public function cities($id) { ... }

в формате JSON.

Для этого проверьте сетевой журнал в своем браузере (в Firefox o Chrome F12 -> Net: XHR -> Response) или добавьте colsole.log(data) в обратном вызове успеха.

Answer 2

на ваш взгляд заменит вас вторым select

 <select name="cities" class="form-control" id='cities'> </select>

ваш первый выбор изменить это

<select name="prov" class="form-control">
  <option value="">=== Choose Province ===</option>
    @foreach ($prov as $key=>$value)                               
        option value="{{$value->id}}">{{$value->name}}</option>                                    
    @endforeach
</select>

следующее изменение в вашем контроллере

public function cities($id)
 {
   $city = City::where("id_provinsi",$id)->get()              
   return response()->json(['cities' => $city], 200);
 }

измените это в вашем each внутри ajax

$.each(data.cities, function(key, value) {
 $('#cities').append('<option value="'+ value.id+'">'+ value.name +'</option>');
});

измените свой url AJAX для этого

 url:"{{ url('/register/cities/') }}/"+provID;

Answer 3

public function cities($id)
{
        $city = City::where("id_provinsi","=",$id)
                      ->pluck("city_name","id");

       $html = view('city_list', compact('city'))->render();
        return response()->json([
            'html' => $html             
        ]);

}

city_list.blade.php

<select name="city" class="form-control">
    <option value="">=== Choose City===</option>
  @foreach ($city as $key=>$value)                               
     <option value="{{$key}}">{{$value}}</option>                                    
  @endforeach
</select>