dijo.dill
dijo.dill

I created a plugin that has a list of cars, their brands, models, their prices, and their status(available(0)/sold(1)).
While filtering that list in front-end via ajax, like below

<select name="Filter[brand]" class="selected">
          {% for car in cars %}
               <option value="{{car.brand}}">{{car.brand}}</option>
          {% endfor %}
</select>
<select name="Filter[model]" class="selected">
          {% for car in cars %}
               <option value="{{car.model}}">{{car.model}}</option>
          {% endfor %}
</select>

When I select a brand it should show only that particular brand's models in select options, instead of showing all the models from all cars.
For example, if I select BMW as a brand then the model selector should show me only BMW models.
How to do it? Please, Kindly help me.

daftspunky
daftspunky

Hi dijo,

Hopefully, this will point you in the right direction...

function onUpdateModels()
{
    $brand = post('Filter[brand]');
    $cars = CarModel::where('brand', $brand)->get();
    $this['cars'] = $cars;
}
==
<select name="Filter[brand]" class="selected" data-request="onUpdateModels" data-request-update="'car-options': '#carOptions'">
    {% for car in cars %}
        <option value="{{car.brand}}">{{car.brand}}</option>
    {% endfor %}
</select>
<select name="Filter[model]" class="selected" id="carOptions">
    {% partial 'car-options' cars=cars %}
</select>

The partial to update the options:

<!-- partials/car-options.htm -->
{% for car in cars %}
    <option value="{{car.model}}">{{car.model}}</option>
{% endfor %}

1-2 of 2