Create chain select dropdown using Laravel, Laravolt and Liveware

Install Laravolt Indonesia package

composer require laravolt/indonesia
php artisan vendor:publish --provider="Laravolt\Indonesia\ServiceProvider"
php artisan migrate
php artisan laravolt:indonesia:seed

Install Livewire

composer require livewire/livewire

Create livewire dropdown component

php artisan make:livewire ChainDropdown

Setup routes

Route::get('/dropdown', [HomeController::class,'render_dropdown']);

Setup controller and views

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
    //other functions...
    public function render_dropdown()
    {
      return view('layouts.dropdown'); 
    }
}
@extends('layouts.app')
@section('content')
        <div class="container">
            <livewire:chain-dropdown />
        </div>
@endsection

Setup livewire class component

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ChainDropdown extends Component
{
    public $provinces, $cities;
    public $provinceId=null;
    public function mount()
    {
        $this->provinces = \Indonesia::allProvinces();
        $this->cities = collect();
    }
    public function render()
    {
        return view('livewire.chain-dropdown');
    }
    public function updatedProvinceId($province_id)
    {
        if(!is_null($province_id)){
            $this->cities = \Indonesia::findProvince($province_id, ['cities']);
        }
    }
}

Setup livewire views component

<div>
    <select name="provices" id="provinces" wire:model="provinceId">
        <option value="">Select Province</option>
        @foreach ($provinces as $province)
            <option value="{{ $province->id }}">{{ $province->name }}</option>
        @endforeach
    </select>
    @if (!is_null($provinceId))
        <select>
            <option value="" selected>Select City</option>
            @foreach ($cities->cities as $city)
                <option value="{{ $city->id }}">{{ $city->name }}</option>
            @endforeach
        </select>
    @endif
</div>

full source code can you view on my github https://github.com/dwijonarko/laravel-8-module

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.