Prerequisites

• Fresh or Existing Laravel Project
• Install Livewire
• Include the JavaScript And Styles (on every page that will be using Livewire).

Suggestion layouts/app.blade.php

...
  	@livewireStyles
...
    @livewireScripts

Step 1 - Create Livewire Component

php artisan make:livewire categories-select

#App/Http/Livewire/CategoriesSelect.php

<?php

namespace App\Http\Livewire;

use App\Models\Category;
use App\Models\SubCategory;
use App\Models\SubSubCategory;
use Livewire\Component;


class CategoriesSelect extends Component
{
    public $categories;
    public $subcategories;
    public $subsubcategories;

    public $selectedCategory;
    public $selectedSubCategory;
    public $selectedSubSubCategory;


    public function updatedSelectedCategory($value)
    {
        $this->subcategories = SubCategory::where("category_id", $value)->get();
    }

    public function updatedSelectedSubCategory($value)
    {
        $this->subsubcategories = SubSubCategory::where("sub_category_id", $value)->get();
    }

    public function mount()

    {
        if ($this->selectedCategory) {
            $this->subcategories = SubCategory::where("category_id", $this->selectedCategory)->get();
        }
        if ($this->selectedSubCategory) {
            $this->subsubcategories = SubSubCategory::where("sub_category_id", $this->selectedSubCategory)->get();
        }
    }


    public function render()
    {

        $this->categories = Category::all();
        return view('livewire.categories-select');
    }
}

Step 2 - Edit Livewire View

Now Edit filename categories-select.blade.php in /views/Livewire

<div class="row">
    <div class="col-md-4 col-12">
        <div class="mb-1">
            <label class="form-label" for="title">select category {{ $selectedCategory }}</label>
            <select class="form-control" name="category_id" wire:model='selectedCategory'>
                <option value="" selected>none</option>
                @foreach ($categories as $category)
                <option value="{{ $category->id }}">{{ $category->title }}</option>
                @endforeach
            </select>
            @error('category_id')
            <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
    </div>
    <div class="col-md-4 col-12">
        <div class="mb-1">
            <label class="form-label" for="title">select sub category {{ $selectedSubCategory }}</label>
            <select name="sub_category_id" id="" class="form-control" wire:model='selectedSubCategory'>
                <option value="" selected>none</option>
                @if ($subcategories)
                @foreach ($subcategories as $category)
                <option value="{{ $category->id }}">{{ $category->title }}</option>
                @endforeach
                @endif
            </select>
            @error('sub_category_id')
            <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
    </div>
    <div class="col-md-4 col-12">
        <div class="mb-1">
            <label class="form-label" for="title">select sub sub category {{ $selectedSubSubCategory }}</label>
            <select name="sub_sub_category_id" id="" class="form-control" wire:model='selectedSubSubCategory'>
                <option value="" selected>none</option>
                @if ($subsubcategories)
                @foreach ($subsubcategories as $category)
                <option value="{{ $category->id }}">{{ $category->title }}</option>
                @endforeach
                @endif
            </select>
            @error('sub_sub_category_id')
            <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
    </div>
</div>

Use livewire component in blade

@livewire('categories-select')

//OR

@livewire('categories-select',[
	'selectedCategory' =>$product->category_id,
	'selectedSubCategory' =>$product->sub_category_id,
	'selectedSubSubCategory' => $product->sub_sub_category_id
])

Conclusion

In this tutorial, we will create a Livewire Multi-level Category Select List with dependent data such as country, state, and city.

Credit: livewire