Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sergionc's avatar

select dynamic with livewire

Hello friends, I am trying to do dynamic select using livewire, any help?

Component:

public $ciudades=[];

public function render()
{
    $regiones = Region::all();
    return view('livewire.select-ciudad',compact('regiones'));
}

public function showciudades($id)
{
    $this->ciudades = Ciudad::where('region_id', '=',$id)->get();
}

View, select father :

    <select class="form-control" style="width: 100%">
        @foreach ($regiones as $region)
            <option value="{{ $region->id }}" wire:click="showciudades({{$region->id}})">
                {{ $region->nombre_region }}
            </option>
        @endforeach
    </select>

Select son:

    <select name="ciudad_id" class="form-control" style="width: 100%">
        @foreach($ciudades as $ciudad)
        <option value="{{$ciudad->id}}">{{$ciudad->nombre_ciudad}}</option>
        @endforeach
    </select>
0 likes
17 replies
sergionc's avatar

@Snapey I have followed the example to the letter, but it throws the same error: Unresolvable dependency resolving [Parameter #0 [ $country ]] in class App\Http\Livewire\SelectCiudad...

CruiseLee's avatar

@snapey Thank you for the blog post. But unfortunately I got the same error like @sergionc. There has to be an initial value.

Thank you for your help

Snapey's avatar

You need to pass the start value into the component's mount method

Snapey's avatar

@cruiselee

The API has changed since I wrote the blog post. You need to pass named parameters to the component

This

        @livewire('dropdowns', $event->country_id, $event->city_id)

changes to

        @livewire('dropdowns', ['country' => $event->country_id, 'city' => $event->city_id])

CruiseLee's avatar

@snapey Is it right that your instructions are analogue for more than two dynamic cascading menus?

https://talltips.novate.co.uk/livewire/dynamic-cascading-dropdown-with-livewire

My class ist looking like follow:

class Dropdowns extends Component
{
    
    public $system;
    public $types=[];
    public $typ;
    public $arts=[];
    public $art;
    public $kats=[];
    public $kat;

    

    public function mount($system, $typ, $art, $kat)
    {
        $this->system=$system;
        $this->typ=$typ;
        $this->art=$art;
        $this->kat=$kat;
    }

    public function render()
    {
        $systems = Teilsystem::all();
        
        if(!empty($this->system)) {
            $this->types = Typ::where('teilsystem', $this->system)->get();
        }
        if(!empty($this->typ)) {
            $this->arts = Art::where('ufertyp', $this->typ)->get();
        }
        if(!empty($this->art)) {
            $this->kats = Kategorie::where('bwart', $this->art)->get();
        }

        return view('livewire.dropdowns')
            ->with('systems', $systems);
    }
}

in my blade:

@livewire('dropdowns', ['system' => $event->system_id, 'typ' => $event->typ_id, 'art' => $event->art_id, 'kat' => $event->kat_id])

$event is giving the initial values. But unfortunately I can only choose the values of $event. But why?

my include ("dropdowns")

    
<div class="form-group row">
    <label for="systems" class="col-md-4 col-form-label text-md-right">{{__('Bauwerkssystem')}}</label>
    <div class="col-md-6">
    <select name="systems" wire:model="system" class="form-control" >
      <option value=""></option>
        @foreach ($systems as $system)
          <option value="{{$system->id}}">{{ $system->teilsystemname }}</option>
        @endforeach
    </select>
    </div>
 </div>
 
 <div class="form-group row">
    <label for="bw_typ" class="col-md-4 col-form-label text-md-right">{{__('Bauwerkstyp')}}</label>
    <div class="col-md-6">
    <select name="bw_typ" wire:model="typ" class="form-control" >
        <option value=""></option>
        @foreach($this->types as $typ)
            <option value={{ $typ->id }}>{{ $typ->typ }}</option>
        @endforeach
    </select>
    </div>
  </div>
 
 <div class="form-group row">
    <label for="bw_art" class="col-md-4 col-form-label text-md-right">{{__('Bauwerksart')}}</label>
    <div class="col-md-6">
    <select name="bw_art" wire:model="art" class="form-control" >
        <option value=""></option>
        @foreach($this->arts as $art)
            <option value={{ $art->id }}>{{ $art->bwart }}</option>
        @endforeach
    </select>
    </div>
  </div>
 
 <div class="form-group row">
    <label for="bw_kat" class="col-md-4 col-form-label text-md-right">{{__('Bauwerkskategorie')}}</label>
    <div class="col-md-6">
    <select name="bw_kat" wire:model="kat" class="form-control" >
        <option value=""></option>
        @foreach($this->kats as $kat)
            <option value={{ $kat->id }}>{{ $kat->bwkategorie }}</option>
        @endforeach
    </select>
    </div>
  </div>

Thanks for your help

PS: I know, to open a new thread for new questions, but it's addressing you directly ;-) @snapey

1 like
Snapey's avatar

@cruiselee can you format the blade view better.

Please format your code by putting 3 backticks ``` on a line before and after each code block

Neeraj1005's avatar

@sergionc @cruiselee did you solve this cascading problem? please let me know, because I'm facing the some problem where my cascading is not working.

CruiseLee's avatar

Hi @neeraj1005

Not yet... I hoped livewire would be an easy solution but somehow it won't work and I do not see why... @snapey why there has to be a value for each dropdown already at beginning (i.e. $event)?

Thanks for answer

Snapey's avatar

There does not have to be default values. I show optional functionality to pass start values, as you would need if the user was editing their previous choices. I edited the article to make this clearer.

laranewbie's avatar

Hello @snapey where can i initialize $event or $concert in your tutorial in talltips? it return undefined variable when i follow your tutorial thanks

Snapey's avatar

@laranewbie you have to substitute event for whatever variable contains your initial values

1 like

Please or to participate in this conversation.