Dependent dropdown, send request as dropdown change
Hello,
I am using Livewire and below is a dependent dropdown,
<div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-1">
<div class="d-flex align-items-center gap-2 gap-lg-3">
<select class="form-select form-select-sm form-select-solid" wire:model.live="selectedSymbol"
id="symbol">
<option value="null">Select Symbol</option>
@foreach (\App\Models\NseFnoSymbol::distinct()->orderBy('id')->pluck('symbol') as $key => $value)
<option value="{{ $value }}" @if($selectedSymbol == $value) selected @endif>{{ $value }}</option>
@endforeach
</select>
<select class="form-select form-select-sm form-select-solid" wire:model.live="selectedExpiry"
wire:key="{{ $selectedSymbol }}" id="expiry">
<option value="null" disabled>Select Expiry</option>
@foreach (\App\Models\OptionExpiry::where('underlying_symbol', $selectedSymbol)->orderBy('expiry', 'asc')->distinct()->pluck('expiry') as $key => $value)
<option value="{{ $value }}" @if($selectedExpiry == $value) selected @endif>{{ $value }}</option>
@endforeach
</select>
</div>
</div>
Now dropdown works fine where select selectedSymbol it get its match selectedExpiry and it get selected in 2nd select option,
Now the question is, as I select selectedSymbol, it get selectedExpiry, it should fire a request to component to get new data as soon as selectedExpiry change,
Right now, I get data only when I manually change selectedExpiry,
Desired behaviour is that on first instance, it should get data automatically, and then when use change selectedExpiry to other option, it get new data,
So how can I fire request to the component to send new data as soon as I change selectedSymbol at first time?
Please or to participate in this conversation.