Laravel Livewire Dependant Dropdown Example

In this example we will show laravel livewire dependant dropdown example. This post we will focused on dependant dropdown with livewire in laravel app. I explain step by step example of laravel livewire state city dropdown.  you learn simple example of laravel dependent dropdown using livewire.

We will show simple example of how to add dependent drop down list in laravel livewire This post will help you step by step on how to add dependent drop down list in laravel using livewire.

In this example, we will create example of city and state dependant dropdown using laravel livewire. you can simply add livewire dependant dropdown laravel 6, laravel 7 and laravel 8 version.

Step 1: Install Laravel 

In this step we will install fresh laravel package using bellow command:

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

Step 2: Create Migration and Model

In this step, we need to create states and cities table with model. so let’s create as bellow:

php artisan make:migration create_states_cities_tables
<?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');
    }
}

Now let’s we will create model by using bellow commands:

php artisan make:model State

php artisan make:model City

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'];
}

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 = ['state_id', 'name'];
}

Step 3: Install Livewire

composer require livewire/livewire

Step 4: Create Component

In this step we will create livewire component using their command. so run bellow command to create statecitydropdown component.

php artisan make:livewire statecitydropdown

app/Http/Livewire/Statecitydropdown.php

<?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();
        }
    }
    
}

resources/views/livewire/statecitydropdown.blade.php

<div>
    <h1>Laravel Livewire Dependant Dropdown - ItSolutionStuff.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: Create Route

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\Statecitydropdown;
 
  
Route::get('statecitydropdown', Statecitydropdown::class);

Step 6: Create View File

In this step we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts. so let’s add it.

Read Also :  Razorpay Payment Gateway Integration in Laravel

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - web-tuts.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">
    @yield('content')
</div>
    
</body>
  
@livewireScripts
  
</html>

Now you can run using bellow command:

php artisan serve

Open bellow URL:

localhost:8000/statecitydropdown

I hope you understand of laravel livewire dependent dropdown and it can help you…