Laravel 8 Livewire Dependent Dropdown Tutorial

In this tutorial you will learn about the Laravel 8 Livewire Dependent Dropdown Tutorial and its application with practical example.

In this Laravel 8 Livewire Dependent Dropdown Example tutorial, I’ll show you how to create dependent dropdown with Livewire in laravel 8. In this tutorial you will learn to implement dependent dropdown with Livewire in laravel 8. In this article we will be creating simple country state city dependent dropdown example to demonstrate dependent dropdown example in laravel.

Table Of Contents−

Laravel 8 Livewire Dependent Dropdown Tutorial

In this step by step Laravel 8 Livewire Dependent Dropdown tutorial I will demonstrate you how to create Livewire Dependent Dropdown in laravel 8 application. Please follow instruction given below:

Step 1: Install Laravel 8 App
Step 2: Add Database Detail
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 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .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

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

Now, in this step we will create a migration file. Please run the following command:

php artisan make:migration create_states_cities_tables

1	php artisan make:migration create_states_cities_tables

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

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

Now, we will create model file. Please run the following command:

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

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

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

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

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Step 5: Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

In this step we will create a livewire component for country state city dropdown functionality:

php artisan make:livewire statecitydropdown

1	php artisan make:livewire statecitydropdown

The above command will create the component on the following path:

app/Http/Livewire/Statecitydropdown.php

resources/views/livewire/statecitydropdown.blade.php

app/Http/Livewire/Statecitydropdown.php

resources/views/livewire/statecitydropdown.blade.php

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

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

}

Now, 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</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>

<div>

<h1>Laravel Livewire Dependant Dropdown</h1>

<label for="state" class="col-md-4 col-form-label text-md-right">State</label>

<option value="" selected>Choose state</option>

@foreach($states as $state)

<option value="{{ $state->id }}">{{ $state->name }}</option>

@endforeach

</select>

</div>

@if (!is_null($selectedState))

<option value="" selected>Choose city</option>

@foreach($cities as $city)

@endforeach

</select>

</div>

@endif

</div>

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

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

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

In this step we will create blade view files. Go to resources/views/livewire folder and create one blade view files that name app.blade.php file. Then put the following code into your app.blade.php file:

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

<!DOCTYPE html>

<html>

<head>

<title>Laravel Livewire Example</title>

@livewireStyles

</head>

<body>

@yield('content')

</div>

</body>

@livewireScripts

</html>

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

localhost:8000/statecitydropdown

1	localhost:8000/statecitydropdown

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Step 1: Install Laravel 8 App

Step 2: Add Database Detail

Step 3: Create Migration For File using Artisan

Step 4: Create Model File

Step 5: Install Livewire Package

Step 8: Create View File

Step 9: Run Development Server

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example