Let’s consider an example of a Laravel livewire-dependent dropdown. In this tutorial, we will create an example consisting of city and state dependant dropdown using Laravel livewire. you can use easily add livewire dependant dropdown Laravel 6, Laravel 7, Laravel 8, and Laravel 9 versions.
So, let’s follow the below steps:
Step 1: Install Laravel 9
Get the latest Laravel 9 version application using the below command. To do so, open your terminal OR command prompt and run the below command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Migration and Model
Create a states and cities table with the model as below:
php artisan make:migration create_states_cities_tables
database/migrations/2021_02_02_143326_create_states_cities_tables.php
<?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, we will be creating a model by using the below 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
Install livewire to the Laravel 9 application using the below command:
composer require livewire/livewire
Step 4: Create Component
Create a livewire component using their command. Run the below command to create a state, city, dropdown component.
php artisan make:livewire statecitydropdown
Now, create files for both path:
app/Http/Livewire/Statecitydropdown.php
resources/views/livewire/statecitydropdown.blade.php
Now, in both the files we will update the below content for the contact us form.
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 </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
In this step, we will be creating one route for calling our example, so let’s add a new route to the web.php file as below:
Also, Read Laravel Livewire File Upload Tutorial
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);
Step 6: Create View File
Create blade file for call form route. in this file, we will use @livewireStyles, and @livewireScripts. Let’s add it.
resources/views/layouts/app.blade.php
<!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>
php artisan serve
Output