In my ever-evolving world of web development, delivering smooth and interactive user experiences has become my top priority. As a Laravel enthusiast, I have always appreciated the framework's capabilities in empowering developers like me to create feature-rich applications effortlessly.

With the advent of Laravel 10, I found myself eager to explore the latest advancements and powerful tools it has to offer.

Among the array of cutting-edge features, Livewire emerges as a true game-changer for crafting dynamic, real-time interfaces without losing the elegance of Laravel's syntax.

And in this article, I am excited to delve deep into one of Livewire's most sought-after functionalities - the Dependent Dropdown.

Dependent dropdowns are a common requirement in web applications, allowing users to select options from a second dropdown menu that dynamically updates based on their choice in the first dropdown. This seamless interactivity significantly enhances user experience, optimizes data selection, and reduces page reloads.

Throughout my journey, I will explore the ins and outs of building Dependent Dropdowns using Laravel 10 Livewire.

From setting up the development environment to handling data updates in real time, I will walk you through each step with clear explanations and practical examples.

Whether you are a seasoned Laravel developer looking to stay ahead of the curve or a budding enthusiast like me, eager to learn the latest features of Laravel 10, this article will serve as our gateway to mastering Livewire and creating exceptional user experiences with Dependent Dropdowns.

So, let's embark on this empowering journey together and take our Laravel skills to the next level. Also, see how to create a dependent dropdown in laravel 10 Livewire, dependent dropdown in laravel, and country state city dropdown in laravel 10 Livewire.

 

Create a new Laravel project or use an existing one. If you don't have Laravel installed, you can install it using Composer.

composer global require laravel/installer
laravel new dependent_dropdown
cd dependent_dropdown

 

Configure your database credentials in the .env file, and then create the necessary database tables. For this example, we'll create three tables: countries, states, and cities.

 

Generate the models and migrations for the Country, State, and City tables.

php artisan make:model Country -m
php artisan make:model State -m
php artisan make:model City -m

Open each migration file in the database/migrations directory and define the table schema as follows.

// database/migrations/xxxx_xx_xx_create_countries_table.php
public function up()
{
    Schema::create('countries', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

// database/migrations/xxxx_xx_xx_create_states_table.php
public function up()
{
    Schema::create('states', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->integer('country_id');
        $table->timestamps();
    });
}

// database/migrations/xxxx_xx_xx_create_cities_table.php
public function up()
{
    Schema::create('cities', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->integer('state_id');
        $table->timestamps();
    });
}

Once the migrations are defined, run the migration to create the tables.

php artisan migrate

 

 

 Add the following code to the respective model files.

app/Models/Country.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Country extends Model
{
    use HasFactory;
  
    protected $fillable = ['name'];
}

app/Models/State.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class State extends Model
{
    use HasFactory;
  
    protected $fillable = ['name','country_id'];
}

 

app/Models/City.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class City extends Model
{
    use HasFactory;
  
    protected $fillable = ['name', 'state_id'];
}

Then, install Livewire using the following command.

composer require livewire/livewire

 

Generate a Livewire component to handle the dependent dropdown functionality.

php artisan make:livewire DependentDropdown

 

Open the app/Http/Livewire/DependentDropdown.php file and add the necessary properties and methods.

<?php
  
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Country;
use App\Models\State;
use App\Models\City;

class DependentDropdown extends Component
{
    public $countries;
    public $states;
    public $cities;

    public $selectedCountry;
    public $selectedState;

    public function mount()
    {
        $this->countries = Country::all();
    }

    public function updatedSelectedCountry($value)
    {
        $this->states = State::where('country_id', $value)->get();
        $this->cities = [];
    }

    public function updatedSelectedState($value)
    {
        $this->cities = City::where('state_id', $value)->get();
    }

    public function render()
    {
        return view('livewire.dependent-dropdown');
    }
}

 

 

Create the Livewire blade view resources/views/livewire/dependent-dropdown.blade.php.

<div>
    <h1>laravel 10 Livewire Dependent Dropdown - Websolutionstuff</h1>
    <div>
        <label for="country">Country:</label>
        <select wire:model="selectedCountry" id="country">
            <option value="">Select Country</option>
            @foreach ($countries as $country)
                <option value="{{ $country->id }}">{{ $country->name }}</option>
            @endforeach
        </select>
    </div>

    @if (!empty($states))
        <div>
            <label for="state">State:</label>
            <select wire:model="selectedState" id="state">
                <option value="">Select State</option>
                @foreach ($states as $state)
                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                @endforeach
            </select>
        </div>
    @endif

    @if (!empty($cities))
        <div>
            <label for="city">City:</label>
            <select id="city">
                <option value="">Select City</option>
                @foreach ($cities as $city)
                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                @endforeach
            </select>
        </div>
    @endif
</div>

 

In routes/web.php, add the Livewire component's route

use App\Http\Livewire\DependentDropdown;

Route::get('/', DependentDropdown::class);

 

Start the development server and visit the application in your browser.

php artisan serve

Now, you should have a working dependent dropdown for country, state, and city in your Laravel application using Livewire. When you select a country, the corresponding states will be dynamically loaded, and when you select a state, the related cities will be loaded in the third dropdown.

 

---

You might also like:

• Read Also: Laravel 10 Livewire CRUD Operation Example
• Read Also: How to Create Livewire Datatable Using Laravel 10
• Read Also: How To Integrate Stripe Payment Gateway In Laravel 8
• Read Also: Laravel 10 Livewire CRUD With Jetstream And Tailwind CSS