Thymeleafのプルダウン×SpringBoot

Springのコントロールクラスから取得したList（リスト）やMap（マップ）のプルダウンをThymeleafで表示する方法
 
 

■index.html（List）

<select name="select-month" onchange="changeDate(this.value)">
    <option th:each="list : ${monthList}" th:value="${list}">[[${list}]]</option>
</select>

 

【ポイント】

①「onchange」でプルダウン変更時のアクションをJavaScriptに渡す
②「this.value」でプルダウンの値を取得
③th:eachで「monthList」のリストインスタンスを「list」で受け取り、th:value="${list}で値を取得
④[[${list}]]で画面表示
※[[]]はインライン式
 
 

---

■index.html（Map）

<select name="select-month" onchange="changeDate(this.value)">
    <option th:each="map : ${monthMap}" th:value="${map.value}">[[${map.key}]]</option>
</select>

 

【ポイント】

①「onchange」でプルダウン変更時のアクションをJavaScriptに渡す
②「this.value」でプルダウンの値を取得
③th:eachで「monthMap」のマップ型インスタンスを「map」で受け取り、th:value="${map.value}で値を取得
④[[${map.key}]]で画面表示
※[[]]はインライン式