Laravel 11 AJAX Dependent Country State City Dropdown Example

In this tutorial, i will show you how to create country state city dependent dropdown using ajax in laravel 11 applications

Let’s create a view dependent Country State City dropdown and display dynamic data in the dropdown from MySQL database with the help of jQuery Ajax:

Step 1: Define Routes

Define routes in routes/web.php for handle country state city options data requests via ajax:

use App\Http\Controllers\DropdownController;

Route::get('/', [DropdownController::class, 'index']);
Route::get('/get-states/{id}', [DropdownController::class, 'getStates']);
Route::get('/get-cities/{id}', [DropdownController::class, 'getCities']);

Step 2: Create Controllers

Create a controller class to handle data from database:

php artisan make:controller DropdownController

Define methods in DropdownController.php file to handle fetching dropdown option data from the database and pass it on views using response:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Country;
use App\Models\State;
use App\Models\City;

class DropdownController extends Controller
{
    public function index()
    {
        $countries = Country::pluck('name', 'id');
        return view('dropdown', compact('countries'));
    }

    public function getStates($id)
    {
        $states = State::where('country_id', $id)->pluck('name', 'id');
        return response()->json($states);
    }

    public function getCities($id)
    {
        $cities = City::where('state_id', $id)->pluck('name', 'id');
        return response()->json($cities);
    }
}

Step 3: Create Dropdowns in Blade View

In your Blade view file, create dropdowns for country state city using HTML and bootstrap 5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>country state city dependent dropdown using ajax in laravel 11 - itcodstuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h2 class="mb-4">Laravel 11 Country State City Dropdown using Ajax - ItcodStuff.com</h2>

        <div class="row">
            <div class="col-md-4">
                {!! Form::select('country', $countries, null, ['id' => 'country', 'class' => 'form-select']) !!}
            </div>
            <div class="col-md-4">
                {!! Form::select('state', [''=>'Select State'], null, ['id' => 'state', 'class' => 'form-select']) !!}
            </div>
            <div class="col-md-4">
                {!! Form::select('city', [''=>'Select City'], null, ['id' => 'city', 'class' => 'form-select']) !!}
            </div>
        </div>
    </div>

</body>
</html>

Step 4: Write JavaScript for Ajax

Write JavaScript code to handle AJAX requests for fetching states and cities based on the selected country and state:


    <script>
        $(document).ready(function(){
            $('#country').change(function(){
                var country_id = $(this).val();
                $('#state').empty();
                $('#city').empty();

                $.ajax({
                    url: '/get-states/' + country_id,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response){
                        var len = response.length;
                        $('#state').append("<option value=''>Select State</option>");
                        for( var i = 0; i<len; i++){
                            var id = response[i]['id'];
                            var name = response[i]['name'];
                            $('#state').append("<option value='"+id+"'>"+name+"</option>");
                        }
                    }
                });
            });

            $('#state').change(function(){
                var state_id = $(this).val();
                $('#city').empty();

                $.ajax({
                    url: '/get-cities/' + state_id,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response){
                        var len = response.length;
                        $('#city').append("<option value=''>Select City</option>");
                        for( var i = 0; i<len; i++){
                            var id = response[i]['id'];
                            var name = response[i]['name'];
                            $('#city').append("<option value='"+id+"'>"+name+"</option>");
                        }
                    }
                });
            });
        });
    </script>

Step 5: Test Your Application

Run the php artisan serve command to run laravel application server:

php artisan serve

To test this application, open your browser and type the URL http://127.0.0.1:8000/.

Thanks for reading….

Step 1: Define Routes

Step 2: Create Controllers

Step 3: Create Dropdowns in Blade View

Step 4: Write JavaScript for Ajax

Step 5: Test Your Application

Leave a Comment Cancel reply