Laravel 11 Livewire Dependent Dropdown Tutorial

In laravel 11 livewire, Populating the select option in the second dropdown based on the first dropdown selection.

Let’s start creating a dependent country, state, and city dropdown using Livewire:

Step 1: Create Migration and Model

Run the following command to create model and migration file:

php artisan make:migration create_states_cities_tables

Edit database/migrations/create_states_cities_tables.php file, and add the following code in it:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateStatesCitiesTables extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('states', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
  
        Schema::create('cities', function (Blueprint $table) {
            $table->id();
            $table->integer('state_id');
            $table->string('name');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('states');
        Schema::dropIfExists('cities');
    }
}

Add fillable property in app/Models/State.php file:

protected $fillable = ['name'];

And add fillable property in app/Models/City.php file:

protected $fillable = ['state_id', 'name'];

Step 2: Set Up Livewire

Run the following command to install livewire package in application:

composer require livewire/livewire

Step 3: Create Dependent Dropdown Component

Run following command to create create dependent dropdown component file:

php artisan make:livewire statecitydropdown

Step 4: Add Dropdown Functionality in Component File

Edit app/Http/Livewire/statecitydropdown.php file, and implement dropdown functionality code in it:

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Models\City;
use App\Models\State;
  
class Statecitydropdown extends Component
{
    public $states;
    public $cities;
  
    public $selectedState = NULL;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function mount()
    {
        $this->states = State::all();
        $this->cities = collect();
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.statecitydropdown')->extends('layouts.app');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function updatedSelectedState($state)
    {
        if (!is_null($state)) {
            $this->cities = City::where('state_id', $state)->get();
        }
    }
    
}

Edit resources/views/livewire/statecitydropdown.blade.php file, and implement dropdown views code in it:

<div>
    <h1>Laravel 11 Livewire Dependent Dropdown - ItcodStuff.com</h1>
    <div class="form-group row">
        <label for="state" class="col-md-4 col-form-label text-md-right">State</label>
        <div class="col-md-6">
            <select wire:model="selectedState" class="form-control">
                <option value="" selected>Choose state</option>
                @foreach($states as $state)
                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                @endforeach
            </select>
        </div>
    </div>
  
    @if (!is_null($selectedState))
        <div class="form-group row">
            <label for="city" class="col-md-4 col-form-label text-md-right">City</label>
  
            <div class="col-md-6">
                <select class="form-control" name="city_id">
                    <option value="" selected>Choose city</option>
                    @foreach($cities as $city)
                        <option value="{{ $city->id }}">{{ $city->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    @endif
</div>

Step 5: Import Livewire Component in View

Edit resources/views/welcome.blade.php file and import dropdown view component in it:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Livewire Dependent Dropdown Tutorial - Itcodstuff.com</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2>Laravel 11 Livewire Dependent Dropdown Tutorial - Itcodstuff.com</h2>
                    </div>
                    <div class="card-body">
                        @livewire('statecitydropdown')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

Step 6: Test Application

Run php artisan serve command to start application server:

php artisan serve

Open the following url in browser for test this application:

http://localhost:8000/