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

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

Setup livewire class component

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)
            $this->cities = \Indonesia::findProvince($province_id, ['cities']);

Setup livewire views component

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

full source code can you view on my github

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.