1概要

Thymeleafは、Spring Bootにバンドルされている非常に人気のあるテンプレートエンジンです。これについてはすでに多くの記事を発表しています。/tag/thymeleaf/[BaeldungのThymeleafシリーズ]というリンクを参照することを強くお勧めします。

このチュートリアルでは、Thymeleafで

select

および

option

タグを使用する方法を見ていきます。


2 HTMLの基本

HTMLでは、複数の値を含むドロップダウンリストを作成できます。

<select>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="pear">Pear</option>
</select>

各リストは

select

タグとネストした

option

タグで構成されています。

デフォルトでは、Webブラウザは最初に選択されたオプションでリストをレンダリングします


selected

属性を使用して、どの値を選択するかを制御できます。

<option value="orange" selected>Orange</option>

さらに、

disabled

属性を使用して、オプションを選択できないように指定することもできます。

<option disabled>Please select...</option>


3タイムリーフ

Thymleafでは、

th:field

属性を使用してビューをモデルにバインドできます。

<select th:field="** {gender}">
    <option th:value="'M'" th:text="Male"></option>
    <option th:value="'F'" th:text="Female"></option>
</select>

上記の例では必ずしもテンプレートエンジンを使用する必要はありませんが、さらに高度な例では、Thymeleafの機能がわかります。


3.1.

オプション

選択なし

選択可能なオプションが他にもあるシナリオを考えてみると、それらすべてを表示するには、

th:each

属性を

th:value

および

th:text

と共に使用することをお勧めします。

<select th:field="** {percentage}">
    <option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}">
    </option>
</select>

上記の例では、0から100までの一連の数字を使用しています。

各番号の値を

option

タグの

value

属性に割り当て、表示されている値と同じ番号を使用します。

Thymeleafコードはブラウザに次のように表示されます。

<select id="percentage" name="percentage">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="100">100</option>
</select>

  • この例を

    create


    と考えてみましょう。つまり、新しいフォームから始めます。

    パーセント値は事前に選択する必要はありません** 。


3.2. 選択

オプション



  • update

    機能でフォームを拡張したい場合、つまり以前に作成したレコードに戻り、既存のデータをフォームに追加したい場合

    オプションを選択する必要があります

これを実現するには、

th:selected

属性を何らかの条件とともに追加します。

<select th:field="** {percentage}">
    <option th:each="i : ${#numbers.sequence(0, 100)}" th:value="${i}" th:text="${i}"
      th:selected="${i==75}"></option>
</select>

上記の例では、

i

が75に等しいかどうかをチェックして、75の値を事前選択します。

ただし、

このコードは機能しません

、レンダリングされるHTMLは次のようになります。

<select id="percentage" name="percentage">
    <option value="0">0</option>
    ...
    <option value="74">74</option>
    <option value="75">75</option>
    <option value="76">76</option>
    ...
    <option value="100">100</option>
</select>

  • これを修正するには、

    th:field

    を削除して

    name

    属性と

    id

    属性に置き換える必要があります。**

<select id="percentage" name="percentage">

最後に、私たちは得るでしょう:

<select id="percentage" name="percentage">
    <option value="0">0</option>
    ...
    <option value="74">74</option>
    <option value="75" selected="selected">75</option>
    <option value="76">76</option>
    ...
    <option value="100">100</option>
</select>


4結論

この短い記事では、Thymeleafのドロップダウン/リストセレクターを使用する方法を確認しました。値をあらかじめ選択することには、よくある落とし穴が1つあります。これを解決策として示しています。

いつものように、議論の間に使用されたコードはhttps://github.com/eugenp/tutorials/tree/master/spring-thymeleaf[GitHubについて]で見つけることができます。