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 ?