级联选择

在本示例中，我们展示如何使一个select中的选项依赖于另一个select中选择的值。

首先，我们为make选择框设置默认值：奥迪(Audi)。我们为这个品牌渲染model选择框。 然后让make选择框触发一个GET请求到/models来获取车型选项，并目标指向models选择框。

代码如下：

<div>
    <label >品牌</label>
    <select name="make" hx-get="/models" hx-target="#models" hx-indicator=".htmx-indicator">
      <option value="audi">奥迪</option>
      <option value="toyota">丰田</option>
      <option value="bmw">宝马</option>
    </select>
  </div>
  <div>
    <label>车型</label>
    <select id="models" name="model">
      <option value="a1">A1</option>
      ...
    </select>
    <img class="htmx-indicator" width="20" src="/img/bars.svg">
</div>

当向/models端点发出请求时，我们返回该品牌对应的车型：

<option value='325i'>325i</option>
<option value='325ix'>325ix</option>
<option value='X5'>X5</option> 

这些选项就会出现在model选择框中。

🔗演示