laravel - Dependant dropdown not populating dependent select

Question

I want to build a dependent dropdown. When I select a province it needs to add another select with the cities that are in the province. The problem is I am able to get all the cities that are in the province when just printing them outside the other select. Let me show you:

<select class="bg-gray-100 border-2 w-full p-4 rounded-lg" name="province" wire:model="selectedProvince">
    <option selected disabled>Odaberite ?upaniju</option>
    @foreach ($provinces as $province)
        <option value="{{ $province->id }}">
            {{ $province->provincename }}
        </option>
    @endforeach

</select>
@foreach ($locations as $location)
    {{ $location->cityname }}
@endforeach

But when I want to populate the other select with the cities it doesn`t work:

@if (!is_null($selectedProvince))
<div class="mb-4">

    <select name="locations" class="bg-gray-100 border-2 w-full p-4 rounded-lg" id="locations">
        @foreach ($locations as $location)
            <option value="">{{ $location->cityname }}</option>
        @endforeach

    </select>

</div>
@endif

This is my livewire controller:

public $provinces;
public $locations;
public $selectedProvince = NULL;

public function mount(){
    $this->provinces = Province::orderBy('provincename')->get();
    $this->locations = collect();
}

public function render()
{
    return view('livewire.provincecity');
}

public function updatedSelectedProvince($province){

    if(!is_null($province)){
        $this->locations = Location::where('province_id', $province)->get();
    }
}

question from:https://stackoverflow.com/questions/65916598/dependant-dropdown-not-populating-dependent-select

Answer 1

Waitting for answers