Country State City Dropdown using Ajax in Laravel

In this tutorial you will learn about the Country State City Dropdown using Ajax in Laravel and its application with practical example.

In this Laravel country state city dependent dropdown tutorial I’ll show you how to implement dependent country state city dropdown in laravel using jQuery ajax. In this tutorial you will learn to create country state city dropdown using jquery ajax in laravel. In this step by step tutorial I will demonstrate creating ajax country state city dropdown with example.

Table Of Contents−

Country State City Dropdown using Ajax in Laravel

Step 1: Install Laravel App
Step 2: Add Database Details
Step 3: Create Country State City Migration and Model File

Step 4: Add Routes For Country State City
Step 5: Create Controller For Fetch Country State City
Step 6: Create Blade File For Show Dependent Country State City in Dropdown

Step 7: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3: Create Country State City Migration and Model File

Now, in this step we will create model and migration file. Please run the following commands:

php artisan make:model Country
php artisan make:model State
php artisan make:model City

php artisan make:migration create_country_state_city_tables

php artisan make:model Country

php artisan make:model State

php artisan make:model City

php artisan make:migration create_country_state_city_tables

Next, Navigate to database/migrations directory and open create_country_state_city_tables.php. Then update the following code into create_country_state_city_tables.php file, as follow:

<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCountryStateCityTables extends Migration
{
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
        Schema::create('states', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('country_id');            
            $table->timestamps();
        });
        Schema::create('cities', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('state_id');            
            $table->timestamps();
        });
    }
   public function down()
    {
       Schema::drop('countries');
       Schema::drop('states');
       Schema::drop('cities');
    }
}

<?php

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateCountryStateCityTables extends Migration

{

public function up()

{

Schema::create('countries', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->timestamps();

});

Schema::create('states', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->integer('country_id');

$table->timestamps();

});

Schema::create('cities', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->integer('state_id');

$table->timestamps();

});

}

public function down()

{

Schema::drop('countries');

Schema::drop('states');

Schema::drop('cities');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Step 4: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('country-state-city','CountryStateCityController@index');
Route::post('get-states-by-country','CountryStateCityController@getState');
Route::post('get-cities-by-state','CountryStateCityController@getCity');

Route::get('country-state-city','CountryStateCityController@index');

Route::post('get-states-by-country','CountryStateCityController@getState');

Route::post('get-cities-by-state','CountryStateCityController@getCity');

Step 5: Create Controller to Fetch Country State City

Now, lets create a controller named CountryStateCityController using command given below –

php artisan make:controller CountryStateCityController

1	php artisan make:controller CountryStateCityController

Then, Navigate to app/http/controllers and open CountryStateCityController.php file. And update the following code into your CountryStateCityController.php file, as follow:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\{Country,State,City};
 
class CountryStateCityController extends Controller
{
 
    public function index()
    {
        $data['countries'] = Country::get(["name","id"]);
        return view('country-state-city',$data);
    }
    public function getState(Request $request)
    {
        $data['states'] = State::where("country_id",$request->country_id)
                    ->get(["name","id"]);
        return response()->json($data);
    }
    public function getCity(Request $request)
    {
        $data['cities'] = City::where("state_id",$request->state_id)
                    ->get(["name","id"]);
        return response()->json($data);
    }
 
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

use App\{Country,State,City};

class CountryStateCityController extends Controller

{

public function index()

{

$data['countries'] = Country::get(["name","id"]);

return view('country-state-city',$data);

}

public function getState(Request $request)

{

$data['states'] = State::where("country_id",$request->country_id)

->get(["name","id"]);

return response()->json($data);

}

public function getCity(Request $request)

{

$data['cities'] = City::where("state_id",$request->state_id)

->get(["name","id"]);

return response()->json($data);

}

Now, go to resources/views directory And create 1 blade views that named country-state-city.blade.php the file inside this directory.

Then open country-state-city.blade.php file and update the following code into create.blade.php file, as follow:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel PHP Ajax Country State City Dropdown List</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h2 class="text-success">Laravel Country State City Dependent Dropdown List with Ajax</h2>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" id="country-dropdown">
<option value="">Select Country</option>
@foreach ($countries as $country) 
<option value="{{$country->id}}">
{{$country->name}}
</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="state-dropdown">
</select>
</div>                        
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city-dropdown">
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#country-dropdown').on('change', function() {
var country_id = this.value;
$("#state-dropdown").html('');
$.ajax({
url:"{{url('get-states-by-country')}}",
type: "POST",
data: {
country_id: country_id,
_token: '{{csrf_token()}}' 
},
dataType : 'json',
success: function(result){
$('#state-dropdown').html('<option value="">Select State</option>'); 
$.each(result.states,function(key,value){
$("#state-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');
});
$('#city-dropdown').html('<option value="">Select State First</option>'); 
}
});
});    
$('#state-dropdown').on('change', function() {
var state_id = this.value;
$("#city-dropdown").html('');
$.ajax({
url:"{{url('get-cities-by-state')}}",
type: "POST",
data: {
state_id: state_id,
_token: '{{csrf_token()}}' 
},
dataType : 'json',
success: function(result){
$('#city-dropdown').html('<option value="">Select City</option>'); 
$.each(result.cities,function(key,value){
$("#city-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');
});
}
});
});
});
</script>
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel PHP Ajax Country State City Dropdown List</title>

</head>

<body>

<h2 class="text-success">Laravel Country State City Dependent Dropdown List with Ajax</h2>

</div>

<form>

<label for="country">Country</label>

<option value="">Select Country</option>

@foreach ($countries as $country)

</option>

@endforeach

</select>

</div>

<label for="state">State</label>

</select>

</div>

</select>

</div>

</form>

</div>

$(document).ready(function() {

$('#country-dropdown').on('change', function() {

var country_id = this.value;

$("#state-dropdown").html('');

$.ajax({

url:"{{url('get-states-by-country')}}",

type: "POST",

data: {

country_id: country_id,

_token: '{{csrf_token()}}'

dataType : 'json',

success: function(result){

$('#state-dropdown').html('<option value="">Select State</option>');

$.each(result.states,function(key,value){

$("#state-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');

});

$('#city-dropdown').html('<option value="">Select State First</option>');

}

});

$('#state-dropdown').on('change', function() {

var state_id = this.value;

$("#city-dropdown").html('');

$.ajax({

url:"{{url('get-cities-by-state')}}",

type: "POST",

data: {

state_id: state_id,

_token: '{{csrf_token()}}'

dataType : 'json',

success: function(result){

$('#city-dropdown').html('<option value="">Select City</option>');

$.each(result.cities,function(key,value){

$("#city-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');

});

}

});

</script>

</body>

</html>

Now add country state city script code into your country-state-city.blade.php file, after the closing of body tag:

<script>
$(document).ready(function() {
$('#country-dropdown').on('change', function() {
var country_id = this.value;
$("#state-dropdown").html('');
$.ajax({
url:"{{url('get-states-by-country')}}",
type: "POST",
data: {
country_id: country_id,
_token: '{{csrf_token()}}'
},
dataType : 'json',
success: function(result){
$.each(result.states,function(key,value){
$("#state-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');
});
$('#city-dropdown').html('<option value="">Select State First</option>'); 
}
});
});    
$('#state-dropdown').on('change', function() {
var state_id = this.value;
$("#city-dropdown").html('');
$.ajax({
url:"{{url('get-cities-by-state')}}",
type: "POST",
data: {
state_id: state_id,
_token: '{{csrf_token()}}'
},
dataType : 'json',
success: function(result){
$.each(result.cities,function(key,value){
$("#city-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');
});
}
});
});
});
</script>

$(document).ready(function() {

$('#country-dropdown').on('change', function() {

var country_id = this.value;

$("#state-dropdown").html('');

$.ajax({

url:"{{url('get-states-by-country')}}",

type: "POST",

data: {

country_id: country_id,

_token: '{{csrf_token()}}'

dataType : 'json',

success: function(result){

$.each(result.states,function(key,value){

$("#state-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');

});

$('#city-dropdown').html('<option value="">Select State First</option>');

}

});

$('#state-dropdown').on('change', function() {

var state_id = this.value;

$("#city-dropdown").html('');

$.ajax({

url:"{{url('get-cities-by-state')}}",

type: "POST",

data: {

state_id: state_id,

_token: '{{csrf_token()}}'

dataType : 'json',

success: function(result){

$.each(result.cities,function(key,value){

$("#city-dropdown").append('<option value="'+value.id+'">'+value.name+'</option>');

});

}

});

</script>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/country-state-city

1	http://localhost:8000/country-state-city

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Step 1: Install Laravel App

Step 2: Add Database Details

Step 3: Create Country State City Migration and Model File

Step 4: Add Routes

Step 5: Create Controller to Fetch Country State City

Step 7: Run Development Server

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example