在 Laravel 中選擇國家后沒有出現國家

Question

當我選擇國家時，州選擇選項不會出現，也沒有州可以選擇城市。 這是一些文本，因為 stackoverflow 不允許下面的文本，因為如果代碼太多。 它仍然不允許我因為它所以這里有一些更多的文字。

地址控制器

use App\Country;
use App\State;
use App\City;
public function country()      //Fetches Country Perfectly
{
    $countries= Country::all();
    return view('address')->with('countries',$countries);
}

public function getStates($id)  //Not fetching states
{
    $states = State::where("country_id",$id)->get()->pluck("state_name","id");
    return response()->json($states);
}

public function getCities($id)   //Not fetching cities
{
    $cities= City::where("state_id",$id)->get()->pluck("city_name","id");
    return response()->json($cities);
}

路線

Route::get('/address/country', 'AddressController@country');
Route::get('/getStates/{id}','AddressController@getStates');
Route::get('/getCities/{id}','AddressController@getCities');

地址.刀片

<select name="country" id="country"> 
  <option value="">Select Country</option>
    @foreach ($countries as $country) 
        <option value="{{$country->ID}}">{{$country->name}}</option>  //fetching all the country
    @endforeach
 </select>
<select name="state" id="state">  // no result after country selection
</select>
<select name="city" id="city"> //no result as no state selected
</select>
//Here's a Javascript Code for the country.blade 
<script type="text/javascript">
 $('#country').change(function(){
    var cid = $(this).val();
    if(cid){
    $.ajax({
       type:"get",
       url:"{{ url('/state') }}/"+cid,
       success:function(res)
       {       
            if(res)
            {
                $("#state").empty();
                $("#city").empty();
                $("#state").append('<option>Select State</option>');
                $.each(res,function(key,value){
                    $("#getStates").append('<option value="'+key+'">'+value+'</option>');
                });
            }
       }

    });
    }
 });
 $('#state').change(function(){
    var sid = $(this).val();
    if(sid){
    $.ajax({
       type:"get",
       url:"{{url('/getCities')}}/"+sid,
       success:function(res)
       {       
            if(res)
            {
                $("#city").empty();
                $("#city").append('<option>Select City</option>');
                $.each(res,function(key,value){
                    $("#city").append('<option value="'+key+'">'+value+'</option>');
                });
            }
       }

    });
    }
 }); 
</script>

這里是控制台日志

[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

1172|  
1173|     <script type="text/javascript">
|     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1174|             $('#country').change(function(){
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1175|          var cid = $(this).val();
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1176|          if(cid){
|  ^^^^^^^^^^^^^^^^
1177|          $.ajax({
|  ^^^^^^^^^^^^^^^^
1178|             type:"get",
|  ^^^^^^^^^^^^^^^^^^^^^^
1179|             url:"http://localhost/blog/public/getStates/"+cid,
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1180|             success:function(res)
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1181|             {       
|  ^^^^^^^^^^^^^^^^^^^
1182|                  if(res)
|  ^^^^^^^^^^^^^^^^^^^^^^^ 
1183|                  {
|  ^^^^^^^^^^^^^^^^^
1184|                      $("#state").empty();
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1185|                      $("#city").empty();
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1186|                      $("#state").append('<option>Select State</option>');
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1187|                      $.each(res,function(key,value){
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1188|                          $("#state").append('<option 
value="'+key+'">'+value+'</option>');
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1189|                      });
|  ^^^^^^^^^^^^^^^^^^^^^^^
1190|                  }
|  ^^^^^^^^^^^^^^^^^
1191|             }
|  ^^^^^^^^^^^^
1192|  
|  
1193|          });
|  ^^^^^^^^^^^
1194|          }
|  ^^^^^^^^^
1195|      });
|  ^^^^^^^
1196|      $('#state').change(function(){
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1197|          var sid = $(this).val();
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1198|          if(sid){
|  ^^^^^^^^^^^^^^^^
1199|          $.ajax({
|  ^^^^^^^^^^^^^^^^
1200|             type:"get",
|  ^^^^^^^^^^^^^^^^^^^^^^
1201|             url:"http://localhost/blog/public/getCities/"+sid,
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1202|             success:function(res)
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1203|             {       
|  ^^^^^^^^^^^^^^^^^^^
1204|                  if(res)
|  ^^^^^^^^^^^^^^^^^^^^^^^
1205|                  {
|  ^^^^^^^^^^^^^^^^^
1206|                      $("#city").empty();
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1207|                      $("#city").append('<option>Select City</option>');
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1208|                      $.each(res,function(key,value){
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1209|                          $("#city").append('<option 
value="'+key+'">'+value+'</option>');|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1210|                      });
|  ^^^^^^^^^^^^^^^^^^^^^^^
1211|                  }
|  ^^^^^^^^^^^^^^^^^
1212|             }
|  ^^^^^^^^^^^^
1213|  
|  
1214|          });
|  ^^^^^^^^^^^
1215|          }
|  ^^^^^^^^^
1216|      }); 
|  ^^^^^^^^
1217|  </script>

Answer 1

您需要在使用 pluck 之前獲得結果。 Pluck 是一種用於 Laravel 集合的方法。

public function getStates($id) 
{
    $states = State::where("country_id",$id)->get()->pluck("state_name","id");
    return response()->json($states);
}

public function getCities($id)  
{
    $cities= City::where("state_id",$id)->get()->pluck("city_name","id");
return response()->json($cities);
}

另外你的州路線應該是：

Route::get('/getStates/{id}','AddressController@geStates');

Answer 2

在這里，您沒有將國家 ID 作為 get state 的參數傳遞

Route::get('/getStates','AddressController@geStates');

因此，添加國家 ID 作為參數

Route::get('/getStates/{id}','AddressController@geStates');

還要更改url:"{{ url('/state') }}/"+cid,到url:"{{ url('/getStates') }}/"+cid,

因為路由是getStates

還要更改url:"{{url('/city')}}/"+sid,到url:"{{url('/getCities')}}/"+sid,