プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

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}]]で画面表示