После выбора страны ни одно государство не появилось в Laravel

Question

Когда я выбираю страну, опция выбора штата не отображается, и нет штатов для выбора городов. Вот некоторый текст, потому что stackoverflow не допускает текст ниже, потому что, если слишком много кода. Это все еще не позволяет мне из-за этого, вот еще немного текста.

AddressController

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');

address.blade

<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

Здесь вы не передали идентификатор страны в качестве аргумента для получения состояния

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

Итак, добавьте идентификатор страны в качестве аргумента

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

Также измените url:"{{ url('/state') }}/"+cid, на url:"{{ url('/getStates') }}/"+cid,

Поскольку маршрут getStates

Также измените url:"{{url('/city')}}/"+sid, на url:"{{url('/getCities')}}/"+sid,