级联选择

在这个例子中，我们展示了如何使一个 select 的值依赖于另一个 select 的值。

首先，我们为制造商（make）选择项设置一个默认值：Audi。我们为型号(model)设置几个选择项。然后，我们让 make 选择触发器 GET 检索 /models 模型选项并定位选择 models 项。

以下是代码：

<div>
    <label >Make</label>
    <select name="make" hx-get="/models" hx-target="#models" hx-indicator=".htmx-indicator">
      <option value="audi">Audi</option>
      <option value="toyota">Toyota</option>
      <option value="bmw">BMW</option>
    </select>
  </div>
  <div>
    <label>Model</label>
    <select id="models" name="model">
      <option value="a1">A1</option>
      ...
    </select>
    <img class="htmx-indicator" width="20" src="/img/bars.svg">
</div>

当向 /models 发出请求时，会返回该品牌的选项，并且它们在 model 选项中可用：

<option value='325i'>325i</option>
<option value='325ix'>325ix</option>
<option value='X5'>X5</option>
Server Requests ↑ Show

演示