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 /（任何省份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>

Laravel使用jQuery Ajax链接下拉列表选择

3 个答案: