No State appeared after country Selection in Laravel

Question

As I select the country the State Select Option doesn't appear and there are no states to select cities. Here's some text because stackoverflow is not allowing the below text because if too much code. It is still not allowing me because of it so here's some more text.

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

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>

Here the Console Log

[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

You need to get the results before using pluck. Pluck is a method for laravel collections.

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

Plus your states route should be:

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

Answer 2

Here yo didn't pass the country id as argument for get state

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

So, add country id as argument

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

Also change url:"{{ url('/state') }}/"+cid, to url:"{{ url('/getStates') }}/"+cid,

Because the route is getStates

Also change url:"{{url('/city')}}/"+sid, to url:"{{url('/getCities')}}/"+sid,