Laravel : Country - State - City Dropdown with AJAX

#laravelajaxdropdown #dropdown #laravel57

Many people have struggle with this topic and they can not get the output and some also complains that they get empty dropdown, so here I am writing my second post on medium and sharing my self tried code snippet with html-javascript file, controller file and route file. So let's begin...

First we need a blade.php file:

        <select class="form-control" name="country" id="country">
            <option value="">Select Country</option>
            @foreach ($countries as $country) 
                <option value="$country->country_id">
                 $country->country_name
                </option>
            @endforeach
        </select>

        <select class="form-control" name="state" id="state">
        </select>

        <select class="form-control" name="city" id="city">
        </select>

Then we need a JavaScript file:

        $('#country').change(function(){
        var cid = $(this).val();
        if(cid){
        $.ajax({
           type:"get",
           url:" url('/state') /"+cid, **//Please see the note at the end of the post**
           success:function(res)
           {       
                if(res)
                {
                    $("#state").empty();
                    $("#city").empty();
                    $("#state").append('<option>Select State</option>');
                    $.each(res,function(key,value){
                        $("#state").append('<option value="'+key+'">'+value+'</option>');
                    });
                }
           }

        });
        }
    });
    $('#state').change(function(){
        var sid = $(this).val();
        if(sid){
        $.ajax({
           type:"get",
           url:"url('/city')/"+sid, **//Please see the note at the end of the post**
           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>');
                    });
                }
           }

        });
        }
    });

After that we need to create a controller which fetch all data we need from the database. So here is a code of Controller file:

//For fetching all countries
public function getCounties()
{
    $countries= DB::table("countries")->get();
    return view('index')->with('countries',$countries);
}

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

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

and now last but not the least the route file, which is use to reach to the functions we have created. So let's see the code of rote file:

Route::get('/getCountries','YourController@getCountries');
Route::get('/getStates/{id}','YourController@geStates');
Route::get('/getCities/{id}','YourController@geCities');

Note: Please put curly brackets around url:"(two start curly braces here)url('/state')(two end curly braces here)/"+cid. Tried it to put on code but it shows me an error that Liquid error: Liquid variables are disabled
If anyone has solution for the same then please comment here so next time when I upload code snippets I can use that.

Happy Codding...
Thank you for reading...