Liviewire dropdown select option | Dynamic Cascading Dropdown with Livewire

 

 Livewire Dropdown select option

Create livewire Component

Dropdown.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Department;
use App\Models\Student;
class Dropdown extends Component
{
    public $department;
    public $student;
    public $students;
    public function render()
    {
        $departments=Department::all();
        return view('livewire.dropdown',compact('departments'));
    }
    public function updatedDepartment($dptId)
    {
        $this->students=Student::where('departments_id',$dptId)->get();
    }

}

Livewire blade file

dropdown.blade.php

<div>
    <h2>Dropdown</h2>
    <form>
        <div>
            <label>Department</label>
            <select wire:model="department">
                <option value="">Select a Department</option>
                @foreach($departments as $dpt)
                <option value="{{$dpt->id}}">{{$dpt->name}} </option>
                @endforeach
            </select>
        </div>

@if(!is_null($students))
        <div>
            <label>Student</label>
            <select wire:model="student">
                <option value="">Select a Student</option>
                @foreach($students as $std)
                <option value="{{$std->id}}">{{$std->name}} </option>
                @endforeach
            </select>
        </div>
        @endif
    </form>
</div>

 

create dropdown blade file under Student folder

dropdown.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    @livewire('dropdown')
</div>
@endsection

 Route

Route::view('dropdown','student.dropdown');