Cascading Selects

이 예제에서는 한 select의 값이 다른 select에서 선택된 값에 따라 달라지도록 만드는 방법을 보여줍니다.

먼저 make 선택에 대해 기본값으로 Audi를 설정합니다. 그런 다음 이 make에 대한 model 선택 항목을 렌더링합니다. make 선택 항목은 models 선택 항목을 대상으로 /models로 GET 요청을 트리거하도록 설정합니다.

여기 코드가 있습니다:

<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 엔드포인트로 요청이 전송될 때, 해당 make에 대한 모델이 반환됩니다.

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

그리고 model select에서 사용할 수 있게 됩니다.

🔗Demo