How to get dynamic dependent dropdown using livewire

How to get dynamic dropdown

To dynamically populate the dropdown options from the database using Livewire, you can fetch the data from the database in the mount method or render method and then use it to generate the options in the Blade view. Here's how you can do it:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\YourModel; // Replace YourModel with your actual model name

class DropdownComponent extends Component
{
    public $selectedOption;
    public $options;

    public function mount()
    {
        // Fetch options from the database
        $this->options = YourModel::pluck('name', 'id'); // Assuming 'name' is the column you want to display in the dropdown and 'id' is the column you want to use as the value
    }

    public function render()
    {
        return view('livewire.dropdown-component');
    }
}

In this example, we use the pluck method to fetch data from the database, where 'name' represents the column you want to display in the dropdown options, and 'id' represents the column you want to use as the value for each option.

Then, in your Blade view (dropdown-component.blade.php), you can dynamically generate the dropdown options using the $options variable:

<div>
    <select wire:model="selectedOption">
        <option value="">Select an option</option>
        @foreach ($options as $key => $option)
            <option value="{{ $key }}">{{ $option }}</option>
        @endforeach
    </select>

    <p>Selected Option: {{ $selectedOption }}</p>
</div>

How to get Dependent dynamic dropdown

To get dependent data in a dropdown from the database using Livewire, you need to fetch the data based on the selection made in the first dropdown. You can achieve this by using Livewire's dynamic updates.

Here's a basic example of how to implement dependent dropdowns in Livewire:

Define Livewire component:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Category; // Assuming you have a Category model

class DependentDropdowns extends Component
{
    public $selectedCategory;
    public $selectedSubcategory;
    public $categories;
    public $subcategories;

    public function mount()
    {
        $this->categories = Category::pluck('name', 'id'); // Fetch all categories from the database
    }

    public function updatedSelectedCategory($value)
    {
        if (!empty($value)) {
            // Fetch subcategories based on the selected category
            $this->subcategories = Category::findOrFail($value)->subcategories()->pluck('name', 'id');
        } else {
            $this->subcategories = [];
        }
    }

    public function render()
    {
        return view('livewire.dependent-dropdowns');
    }
}

Create a Blade view for the Livewire component (dependent-dropdowns.blade.php):

<div>
    <select wire:model="selectedCategory">
        <option value="">Select Category</option>
        @foreach ($categories as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
    </select>

    <select wire:model="selectedSubcategory">
        <option value="">Select Subcategory</option>
        @foreach ($subcategories as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
        @endforeach
    </select>
</div>

In this example:

We use Livewire's updatedSelectedCategory method to fetch the subcategories dynamically based on the selected category.
When the selected category changes (updatedSelectedCategory method), Livewire updates the subcategories dropdown accordingly.
The categories and subcategories are fetched from the database using Eloquent models (Category). Adjust these according to your application's needs.