Laravel 11 Livewire Dependent Dropdown

Websolutionstuff | Jun-03-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to create a dependent dropdown in laravel 11 Livewire. Here, we'll learn about country, state, and city dropdowns in laravel 11 Livewire.

In laravel livire, we'll create state and city dependent dropdowns and create a component for them with model and migration.

Step 1: Install Laravel 11

In this step, we will install laravel 11 using the following command.

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

 

 

Step 2: Install Livewire

Next, we will install Laravel Livewire using the following composer command.

composer require livewire/livewire

 

Step 3: Create Migration and Model

Then, we'll create a states and cities table with the model.

php artisan make:migration create_states_cities_tables

Migration: 

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

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 4: Create Component

Now, we'll create a livewire state city dropdown component for the dependent dropdown.

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 11 Livewire Dependent Dropdown - Websolutionstuff</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: Define Route

Then, we'll define routes to the web.php file.

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

Next, we'll create a blade file and include @livewireStyles, and @livewireScripts.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Livewire Dependent Dropdown - Websolutionstuff</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>

 


You might also like:

Recommended Post
Featured Post
Access Denied for user 'root'@'localhost' phpMyAdmin
Access Denied for user 'root'@...

phpMyAdmin is a valuable web-based tool for managing MySQL databases, simplifying various database tasks. However, runni...

Read More

Jul-28-2023

How To Create Dynamic Pie Chart In Laravel
How To Create Dynamic Pie Char...

In this article, we will see how to create a dynamic pie chart in laravel. charts are used to represent data i...

Read More

Jun-24-2020

jQuery Datatable Hide/Show Column Based On Condition
jQuery Datatable Hide/Show Col...

In this article, we will see a jquery datatable hide/show column based on condition. Here, we will learn how to hide and...

Read More

Jan-26-2023

Laravel 10 Scout Search and Algolia Example
Laravel 10 Scout Search and Al...

Hey everyone! Ever wished your Laravel application could deliver lightning-fast search results? Well, I've got great...

Read More

Feb-21-2024