Laravel 8 Dependent Country State City Dropdown with AJAX

In this tutorial you will learn about the Laravel 8 Dependent Country State City Dropdown with AJAX and its application with practical example.

In this Dynamic Dependent Dropdown In Laravel 8 Using jQuery Ajax tutorial I’ll show you how to implement dependent country, state and city dropdown in laravel using jQuery ajax. In this tutorial you will learn to create country, state and city dropdown using jquery ajax in laravel. In this article I will share example to create Dynamic Dependent Dropdown Using jQuery Ajax In Laravel 8. We will be creating an example of country, state and city dropdown using jquery ajax in laravel.

Table Of Contents−

Laravel 8 Dependent Country State City Dropdown with AJAX

In this step by step tutorial I will demonstrate you creating a Dynamic Dependent Dropdown using jquery ajax in laravel. Please follow the instruction given below:

Step 1 – Install Laravel 8 App
Step 2 – Connecting App to Database

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
- Implement Ajax Code for fetch State and City in Dropdown

Step 7 – Run Development Server
Step 8 – Test This App

Step 1 – Install Laravel 8 App

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

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

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

Step 2 – Connecting App to Database

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 command:

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

Now, go 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 For Country State City

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

use App\Http\Controllers\CountryStateCityController;
 
 
Route::get('country-state-city', [CountryStateCityController::class, 'index']);
Route::post('get-states-by-country', [CountryStateCityController::class, 'getState']);
Route::post('get-cities-by-state', [CountryStateCityController::class, 'getCity']);

use App\Http\Controllers\CountryStateCityController;

Route::get('country-state-city', [CountryStateCityController::class, 'index']);

Route::post('get-states-by-country', [CountryStateCityController::class, 'getState']);

Route::post('get-cities-by-state', [CountryStateCityController::class, 'getCity']);

Step 5 – Create Controller For 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

Now, go 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\Models\{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\Models\{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);

}

In this step we will create ablade view file. Go to resources/views folder and create the blade view as following.

country-state-city.blade.php

<!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>

Don’t forget to 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 8 App

Step 2 – Connecting App to Database

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 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