How to create ajax How to create ajax dependent dropdown in laravel 11

In this tutorial, I will teach you how to create ajax dependent dropdown in laravel 11 application. we will create dynamic dependent dropdown for country, state, and city selection in laravel 11.

What is Dependent Dropdown?
A dependent dropdown is a type of menu where the options available in one dropdown menu depend on the choice made in another dropdown menu. For example, if you choose “Fruit” in the first dropdown, the options in the second dropdown might be “Apple,” “Banana,” and “Orange.” But if you choose “Vegetable” in the first dropdown, the options in the second dropdown might change to “Carrot,” “Broccoli,” and “Tomato.” You Can Learn Laravel 11 Generate and Read Sitemap XML File Tutorial

In this example, we will create tables for country, state, and city. Then we will add some dummy data to those tables using a database seeder. After that, we will create a form with three select boxes for country, state, and city. When the user selects a country, the state select box will fill based on the selected country. Then, after the user selects a state, the city select box will fill based on the selected state. So, let’s see the simple step-by-step code for dynamic dependent dropdowns.

Step for How to create ajax dependent dropdown in laravel 11?

Step 1: Install Laravel 11

First of all, we need to get a fresh Laravel 11 version application using the command below because we are starting from scratch. So, open your terminal or command prompt and run the command below:

composer create-project laravel/laravel ajax-dependent-dropdown
cd ajax-dependent-dropdown

You Can Read How to Image Upload with Summernote in Laravel 11 Tutorial

Step 2: Create Migration

In this step, we will create migrations for the countries, states, and cities tables. So let’s run the below command to create tables.

php artisan make:migration create_countries_states_cities_tables

Next, simply update the code below in the migration file.

database/migrations/create_countries_states_cities_tables.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });

        Schema::create('states', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('country_id');
            $table->timestamps();
        });

        Schema::create('cities', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('state_id'); 
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('countries');
        Schema::dropIfExists('states');
        Schema::dropIfExists('cities');
    }
};

Read More