Hello Devs, 

In this tutorial, we will learn Laravel Livewire Dependant Dropdown Example

In this example, we have two tables and there are listed below:


  • demo_state
  • demo_cities

Follow this step-by-step guide below. 

Step 1 : Install Laravel App

run below command.

composer create-project --prefer-dist laravel/laravel blog



Step 2 : Setup Database Configuration

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Step 3 : Create Migration and Model

fire below command:

php artisan make:migration create_state_city_tables

put below code in your migration file for create tables.

database/migrations/2021_01_01_073031_create_state_city_tables.php

<?php

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

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


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

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('demo_cities');
        Schema::drop('demo_state');
    }
}


let's run below command one by one:

php artisan make:model DemoState
php artisan make:model DemoCity

app/Models/DemoState.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class DemoState extends Model
{
    use HasFactory;
    protected $table = 'demo_state';
    protected $fillable = ['name'];
}

app/Models/DemoCity.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class DemoCity extends Model
{
    use HasFactory;
    protected $table = 'demo_cities';
    protected $fillable = ['state_id', 'name'];
}


Step 4 : Install Livewire

composer require livewire/livewire


Step 5 : Create Component

php artisan make:livewire statecity

create files on both paths:

app/Http/Livewire/Statecity.php

resources/views/livewire/statecity.blade.php

app/Http/Livewire/Users.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\DemoCity;
use App\Models\DemoState;

class Statecity extends Component
{
    public $states;
    public $cities;

    public $selectedState = NULL;

    public function mount()
    {
        $this->states = DemoState::all();
        $this->cities = collect();
    }

    public function render()
    {
        return view('livewire.statecity');
    }

    public function updatedSelectedState($state)
    {
        if (!is_null($state)) {
            $this->cities = DemoCity::where('state_id', $state)->get();
        }
    }
}


Step 6 : Add Route

routes/web.php

Route::view('states-city','livewire.home');


Step 7 : Create View

resources/views/livewire/home.blade.php 

<html>
<head>
    <title>Laravel Livewire Dependant Dropdown - rathorji.in</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @livewireStyles
</head>
<body>
    <div class="container">
        <div class="row justify-content-center mt-5">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-dark text-white">
                        <h3>Laravel Livewire Dependant Dropdown - rathorji.in</h3>
                    </div>
                    <div class="card-body">
                        @livewire('statecity')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>


resources/views/livewire/statecity.blade.php

<div>
    <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>

run below command for quick run:

php artisan serve

open bellow URL on your browser:

http://localhost:8000/states-city


May this example help you.