so the problem is, I have multiple selectpickers, when I choose first selectpicker's value another one appears and it should only include values according to previous id, based on relations. There is car brand and it has car models. So for example if I select "BMW", my models selectpicker should only show "BMW" models like "120", "318", "320" and etc.. How can I accomplish such task?

Code I have now:

        <div class="row" style="padding-top: 1cm">
            
            <select id="vehicleBrand" class="selectpicker form-control" data-live-search="true">
                <option data-tokens="Pasirinkite modeli" disabled selected>Pasirinkite modeli</option>
                @foreach ($vehicleBrands as $brand)
                    <option data-tokens="{{ $brand->name }}" value="{{ $brand->id }}">{{ $brand->name }}</option>
                @endforeach
              </select>  
        
        </div>
        <div id="modelDiv" class="row" style="padding-top: 1cm" hidden>
            <input type="text" name="selectedBrandId" id="selectedBrandId" value="none">
            <select id="vehicleModelSell" class="selectpicker form-control" data-live-search="true">
                @foreach ($vehicleModels->where('id','selectedId') as $model)
                    <option data-tokens="{{ $model->name }}" value="{{ $model->id }}">{{ $model->name }}</option>
                @endforeach
            </select>
        </div>

'selectedId' should be the id from first selectpicker, so I could fetch only needed results.

Edit:

Also this is what it looks like:

At first there's only one selectpicker, when I choose the first one, second appears and I want it to show (fetch from database) only the desired ones, but I don't know how to pass id variable from first selectpicker's <option>. I suppose I should use ajax?