Laravel 10/9 Livewire Dependent Dropdown Tutorial

Laravel 10/9 livewire dependant dropdown example; Through this tutorial, i am going to show you how to make dynamic dependent dropdown using livewire in Laravel 10/9 apps.

Laravel 10/9 Livewire Dynamic Dependent Dropdown Tutorial

Follow the below given steps to build dynamic dependent dropdown using livewire in Laravel 10/9 apps:

• Step 1: Install Laravel 10/9 App
• Step 2: Configure Database with App
• Step 3: Create Migration For File using Artisan
• Step 4: Create Model File
• Step 5: Install Livewire Package
• Step 6: Create Dependent Dropdown Component using Artisan
• Step 7: Add Route For Livewire Dependent Dropdown
• Step 8: Create View File
• Step 9: Run Development Server

Step 1: Install Laravel 10/9 App

Run following command on command prompt to install laravel fresh app for laravel livewire file upload app:

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

Step 2: Configure Database with App

Go to laravel app root directory and find .env file. Then add database detail in .env file:

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

Step 3: Create Migration For File using Artisan

Run the following command on command prompt to generate model and migration:

php artisan make:migration create_states_cities_tables

Go to database/migrations folder and open create_states_cities_tables.php file. Then update the following code into create_states_cities_tables.php file:

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

Step 4: Create Model File

Run the following commands on command prompt to create model files:

php artisan make:model State
php artisan make:model City

Then visit app/Models/ directory and open state.php file and add the following code into it:

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

Then visit app/Models/ directory and open city.php file and add the following code into it:

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

Run the following command on command prompt to create the table into your database:

php artisan migrate

Step 5: Install Livewire Package

Run the following command on command prompt to install livewire package to your laravel app:

composer require livewire/livewire

Step 6: Create Dependent Dropdown Component using Artisan

Run the following command on command prompt to create the livewire components for creating a livewire dependent dropdown component:

php artisan make:livewire statecitydropdown

This command will create the following components on the following path:

app/Http/Livewire/Statecitydropdown.php

resources/views/livewire/statecitydropdown.blade.php

Go to app/Http/Livewire folder and open Statecitydropdown.php file. Then add the following code into your Statecitydropdown.php file:

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

Go to resources/views/livewire folder and open statecitydropdown.blade.php file. Then add the following code into your statecitydropdown.blade.php file:

<div>
    <h1>Laravel Livewire Dependant Dropdown - Laratutorials.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 7: Add Route For Livewire Depedent Dropdown

Go to routes folder and open web.php. Then add the following routes into your web.php file:

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\Statecitydropdown;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('statecitydropdown', Statecitydropdown::class);

Step 8: Create View File

Go to resources/views/livewire folder and create one blade view files that name app.blade.php file. Then add the following code into your app.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - Laratutorials.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>

Step 9: Run Development Server

Run the following PHP artisan serve command on cmd to start your laravel livewire upload file app:

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080  

Now, you are ready to run Laravel 10/9 livewire dependetn dropdown app. So open your browser and hit the following URL into your browser:

localhost:8000/statecitydropdown

Recommended Laravel Tutorials