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,
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,
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');
Happy Coding…
Thank you for reading…
Developer's Desk 