How to Create Ajax Dependent Dropdown in Laravel 12

Dynamic dropdowns, where its options change depending on the user’s selection, are one of the modern web application features that make a website interactive. In this tutorial, we will learn how to create an Ajax Dependent Dropdown in Laravel 12. This feature enhances user experience through automatic updating of related options without having to reload the page.

In this tutorial, we will consider an example in which a user will be able to choose his country, state, and city via dependent dropdowns. The city list will be dependent upon the selected state, and the state list will be dependent upon the chosen country. We will use the nnjeim/world package for fetching real-world data. Check out our detailed guide on how you may install and set up this package: Easily Add Global Countries, States, and Cities Data In Laravel 12.

Adding Routes in Laravel 12

Let’s start by defining the routes needed for our Ajax Dependent Dropdown example. We will create three routes. One to show the form, one to get the list of states based on a selected country, and another to get cities based on the selected state.

Open web/routes.php file and add below routes into it:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LocationController;

Route::get('/user-form', [LocationController::class, 'index']);
Route::get('/get-states/{countryId}', [LocationController::class, 'getStates']);
Route::get('/get-cities/{stateId}', [LocationController::class, 'getCities']);

Creating the Controller Logic

Now, let’s create a LocationController that handles all our logic. This controller will use the nnjeim/world package to fetch countries, states, and cities dynamically and return them as JSON responses for Ajax requests.

php artisan make:controller LocationController

It will create new controller file called LocationController.php. Open it and modify as below:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Nnjeim\World\World;

class LocationController extends Controller
{
    public function index()
    {
        $countries = World::countries()->data;
        return view('user-form', compact('countries'));
    }

    public function getStates($countryId)
    {
        $states = World::countries(['id' => $countryId])->states()->data;
        return response()->json($states);
    }

    public function getCities($stateId)
    {
        $cities = World::states(['id' => $stateId])->cities()->data;
        return response()->json($cities);
    }
}

Here getStates() uses county’s ID to filter data for that specific country and return as json. Here, we have used same filter for filtering city data based on state ID.

Building the Frontend Form with Bootstrap

We’ll use Bootstrap for a clean layout and jQuery for frontend. Here, we will create basic form with name, email, country, state and city for basic user details. The country, state and city will be select field with the unique ID. Further we will use this unique ID’s change event to trigger the next dropdown.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 12 Ajax Dependent Dropdown</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h2>Ajax Dependent Dropdown in Laravel 12</h2>
    <form>
        <div class="mb-3">
            <input type="text" class="form-control" name="name" placeholder="Enter Name">
        </div>
        <div class="mb-3">
            <input type="email" class="form-control" name="email" placeholder="Enter Email">
        </div>
        <div class="mb-3">
            <select class="form-select" id="country">
                <option value="">Select Country</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="mb-3">
            <select class="form-select" id="state">
                <option value="">Select State</option>
            </select>
        </div>
        <div class="mb-3">
            <select class="form-select" id="city">
                <option value="">Select City</option>
            </select>
        </div>
    </form>
</div>
</body>
</html>

Loading State Data on Country Selection Using Ajax

We’ll now use Ajax to load the states when a country is selected, passing the country ID to the Laravel route.

<script>
$(document).ready(function() {
    $('#country').on('change', function() {
        let countryId = $(this).val();
        $('#state').html('<option value="">Select State</option>');
        $('#city').html('<option value="">Select City</option>');
        if(countryId) {
            $.get('/get-states/' + countryId, function(data) {
                $.each(data, function(index, state) {
                    $('#state').append('<option value="' + state.id + '">' + state.name + '</option>');
                });
            });
        }
    });
});
</script>

Loading City Data on State Selection Using Ajax

When a state is selected, this script fetches cities using the state ID.

<script>
$(document).ready(function() {
    $('#state').on('change', function() {
        let stateId = $(this).val();
        $('#city').html('<option value="">Select City</option>');
        if(stateId) {
            $.get('/get-cities/' + stateId, function(data) {
                $.each(data, function(index, city) {
                    $('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
                });
            });
        }
    });
});
</script>

With implementing both scripts, you will have clear and working user form which allow user to select filtered data for their location details.

Conclusion

In this tutorial, you have learned how to create an Ajax Dependent Dropdown in Laravel 12. Such a method makes your forms more dynamic and user-friendly because it reloads the page partially. You can easily adapt this logic for real-world projects. You can adapt this logic for many real-world projects. It works well for booking systems, checkout forms, and user profiles that require country, state, and city selection.

Codewolfy