階層式選單

在這個範例中，我們示範如何讓一個 select 選單的值依賴於另一個 select 選單中所選擇的值。

首先，我們先為 make 選單設定一個預設值：Audi。我們為這個廠牌渲染 model 選單。然後，我們讓 make 選單觸發一個對 /models 的 GET 請求，以檢索車款選項並指定到 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 選單中顯示。

🔗示範