カスケード選択

この例では、１つの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 エンドポイントにリクエストが送信されると、その製造元のモデルが返されます。

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

それらは model 選択で使用できるようになります。

🔗デモ