Livewire Dependent Dropdown in Laravel 10 Code Example

In this tutorial we would learn how to create and use livewire dependeant dropdown in Laravel 8, 9 and 10. We are testing it with the livewire state city dropdown. We have explained below everything including the code example for it.

For this one, we are using city names and state dependent dropdowns with the help of livewire in the Laravel 10 app or any other earlier version. This tutorial is applicable with code-piece for Laravel 10, 9 and previous versions.

Let’s follow all the necessary steps. The first one is installing Laravel 10, 9 or any other version

#1 Install Laravel 10

Use this command to install Laravel 10

composer create-project --prefer-dist laravel/laravel laramatic

#2 Now we have to do Migration and Model

We create the model we want such as we need to create City/States for this model table like New York City, Tucson etc.

php artisan make:migration create_states_cities_tables

database/migrations/2023_03_03_143326_create_states_cities_tables.php

<?php

  

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

  

class CreateStatesCitiesTables extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

        Schema::create('states', function (Blueprint $table) {

            $table->id();

            $table->string('name');

            $table->timestamps();

        });

  

        Schema::create('cities', function (Blueprint $table) {

            $table->id();

            $table->integer('state_id');

            $table->string('name');

            $table->timestamps();

        });

    }

    /**

     * Reverse the migrations.

     *

     * @return void

     */

    public function down()

    {

        Schema::dropIfExists('states');

        Schema::dropIfExists('cities');

    }

}

Now we are going to create a Modal by using the following command:

php artisan make:model State

php artisan make:model City

app/Models/State.php

<?php

  

namespace App\Models;

  

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

  

class State extends Model

{

    use HasFactory;

  

    protected $fillable = ['name'];

}

<?php

app/Models/City.php

<?php

  

namespace App\Models;

  

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

  

class City extends Model

{

    use HasFactory;

  

    protected $fillable = ['state_id', 'name'];

}

#3: Install Livewire

Once we are done with these steps the next we would install Livewire in our Laravel 10 project. We have to use the following command:

composer require livewire/livewire

#4 Creating Livewire Component

Now we are creating our Livewire component for statecitydryptdown by using the following command.

php artisan make:livewire statecitydropdown

You will notice two files have been created for each separate path. See below both of them:

app/Http/Livewire/Statecitydropdown.php

resources/views/livewire/statecitydropdown.blade.php

We would require to update them

app/Http/Livewire/Statecitydropdown.php

<?php

  

namespace App\Http\Livewire;

  

use Livewire\Component;

use App\Models\City;

use App\Models\State;

  

class Statecitydropdown extends Component

{

    public $states;

    public $cities;

  

    public $selectedState = NULL;

  

    /**

     * We add more code for the method

     *

     * @return response()

     */

    public function mount()

    {

        $this->states = State::all();

        $this->cities = collect();

    }

  

    /**

     * We can add more code for the method

     *

     * @return response()

     */

    public function render()

    {

        return view('livewire.statecitydropdown')->extends('layouts.app');

    }

  

    /**

     * We can add code for the method

     *

     * @return response()

     */

    public function updatedSelectedState($state)

    {

        if (!is_null($state)) {

            $this->cities = City::where('state_id', $state)->get();

        }

    }

    

}

resources/views/livewire/statecitydropdown.blade.php

<div>

    <h1>Livewire Dependent Dropdown in Laravel 10 - Laramatic</h1>

    <div class="form-group row">

        <label for="state" class="col-md-4 col-form-label text-md-right">State</label>

        <div class="col-md-6">

            <select wire:model="selectedState" class="form-control">

                <option value="" selected>Choose state</option>

                @foreach($states as $state)

                    <option value="{{ $state->id }}">{{ $state->name }}</option>

                @endforeach

            </select>

        </div>

    </div>

  

    @if (!is_null($selectedState))

        <div class="form-group row">

            <label for="city" class="col-md-4 col-form-label text-md-right">City</label>

  

            <div class="col-md-6">

                <select class="form-control" name="city_id">

                    <option value="" selected>Choose city</option>

                    @foreach($cities as $city)

                        <option value="{{ $city->id }}">{{ $city->name }}</option>

                    @endforeach

                </select>

            </div>

        </div>

    @endif

</div>

#5 let’s Create A Route Now

We have to add our route to check verify our tutorial. We would use web.php route like we have:

routes/web.php

<?php

  

use Illuminate\Support\Facades\Route;

 

use App\Http\Livewire\Statecitydropdown;

  

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| We would add/register routes here. They are

| get loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Let's work on it

|

*/

  

Route::get('statecitydropdown', Statecitydropdown::class);

#6 Let’s Create A View

We need to create the blade file to make our route call, we would use @livewireStyles, @livewireScripts in our blade.php file:

resources/views/layouts/app.blade.php