Cascading Selects with HTMX

21 Views Asked by At

I would like to manage 3 cascading selects with HTMX. The example explained on the official website works well with 2 selects, but if I add a third one, its items list is not refreshed when the second one is updated.

For example here:

<div>
  <label>Vehicle</label>
  <select id="vehicle" name="vehicle" hx-get="/makes" hx-target="#make">
    <option value="car">Car</option>
    <option value="car">Plane</option>
    ...
  </select>
</div>
<div>
  <label >Make</label>
  <select name="make" hx-get="/models" hx-target="#models">
    <option value="audi">Audi</option>
    <option value="toyota">Toyota</option>
    ...
  </select>
</div>
<div>
  <label>Model</label>
  <select id="models" name="model">
    <option value="a1">A1</option>
    ...
  </select>
</div>

If I select a vehicle, the list of makes is well updated, but not the list of models. I have to click on a make to update it, that is annoying if the user just want the first make of the list.

How can I trigger to update the list of models when the list of makes just changed ?

0

There are 0 best solutions below