使用 jquery ajax 的 Laravel 链式下拉选择

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>

如果我打开 url /register/cities/(any Province id)，我得到了数据 json。

Answer 1

确保返回的响应在

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

是 JSON 格式。

为此，请检查浏览器中的网络日志（在 Firefox o Chrome F12 -> Net:XHR -> 响应中）或在成功回调中添加 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>