Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Database Migration
php artisan make:model Country -m
C:\xampp\htdocs\laravel\my-app>php artisan make:model Country -m
database/migrations/create_countries_table.php
//database/migrations/create_countries_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('countries', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('shortname');
$table->string('phonecode');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('countries');
}
};
State php artisan make:model State -m
C:\xampp\htdocs\laravel\my-app>php artisan make:model State -m
database/migrations/create_states_table.php
//database/migrations/create_states_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('states', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('country_id');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('states');
}
};
City php artisan make:model City -m
C:\xampp\htdocs\laravel\my-app>php artisan make:model City -m
database/migrations/create_cities_table.php
//database/migrations/create_cities_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('cities', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('state_id');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('cities');
}
};
SQL Database Table Counrty State and City : https://github.com/cairocodes/cairocoders/blob/main/country_state_city Create Controller
php artisan make:controller DropDownController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller DropDownController
app/Http/Controllers/DropDownController.php
//app/Http/Controllers/DropDownController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\{Country,City,State}; // import model
class DropDownController extends Controller
{
public function index()
{
$counteries = Country::get(['name','id']);
return view('dropdown',compact('counteries'));
}
public function fatchState(Request $request)
{
$data['states'] = State::where('country_id',$request->country_id)->get(['name','id']);
return response()->json($data);
}
public function fatchCity(Request $request)
{
$data['cities'] = City::where('state_id',$request->state_id)->get(['name','id']);
return response()->json($data);
}
}
Routes routes/web.php
//
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DropDownController;
Route::get('/', function () {
return view('welcome');
});
Route::get('dropdown',[DropDownController::class,'index']);
Route::post('api/fetch-state',[DropDownController::class,'fatchState']);
Route::post('api/fetch-cities',[DropDownController::class,'fatchCity']);
View Blade File resources/views/dropdown.blade.php
//
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<title>Laravel 9 Country State City Dropdown Using AJAX</title>
</head>
<body>
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-md-12">
<h2>Laravel 9 Country State City Dropdown Using AJAX</h2>
<form>
<div class="form-group mb-3">
<select id="country-dd" class="form-control">
<option value="">Select Country</option>
@foreach($counteries as $data)
<option value="{{$data->id}}">{{$data->name}}</option>
@endforeach
</select>
</div>
<div class="form-group mb-3">
<select id="state-dd" class="form-control"></select>
</div>
<div class="form-group mb-3">
<select id="city-dd" class="form-control"></select>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#country-dd').change(function(event) {
var idCountry = this.value;
$('#state-dd').html('');
$.ajax({
url: "/api/fetch-state",
type: 'POST',
dataType: 'json',
data: {country_id: idCountry,_token:"{{ csrf_token() }}"},
success:function(response){
$('#state-dd').html('<option value="">Select State</option>');
$.each(response.states,function(index, val){
$('#state-dd').append('<option value="'+val.id+'"> '+val.name+' </option>')
});
$('#city-dd').html('<option value="">Select City</option>');
}
})
});
$('#state-dd').change(function(event) {
var idState = this.value;
$('#city-dd').html('');
$.ajax({
url: "/api/fetch-cities",
type: 'POST',
dataType: 'json',
data: {state_id: idState,_token:"{{ csrf_token() }}"},
success:function(response){
$('#city-dd').html('<option value="">Select State</option>');
$.each(response.cities,function(index, val){
$('#city-dd').append('<option value="'+val.id+'"> '+val.name+' </option>')
});
}
})
});
});
</script>
</body>
</html>
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
