Thymeleafでのselectとoptionの使用

Thymeleafでの選択とオプションの使用

Thymeleafは、Spring Bootにバンドルされている非常に人気のあるテンプレートエンジンです。すでに多くの記事を公開しているので、example’s Thymeleaf seriesを確認することを強くお勧めします。

このチュートリアルでは、Thymeleafでselectタグとoptionタグを操作する方法を見ていきます。

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

各リストは、selectタグとネストされたoptionタグで構成されます。 By default, the web browser will render a list with the first option preselected。

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

さらに、disabled属性を使用して、オプションを選択できないように指定できます。

Thymleafでは、th:field属性を使用して、ビューをモデルにバインドできます。

上記の例では実際にはテンプレートエンジンを使用する必要はありませんが、以下のより高度な例では、Thymeleafの機能を確認します。

選択できるオプションがさらにあるシナリオを考えると、それらすべてを表示するためのクリーンで適切な方法は、th:valueおよびth:textとともにth:each属性を使用することです。

上記の例では、0〜100の一連の数字を使用しています。各数値iの値をoptionタグのvalue属性に割り当て、表示された値と同じ数値を使用します。

Thymeleafコードは、ブラウザーで次のようにレンダリングされます。

Let’s think about this example as create、つまり、新しいフォームとpercentage value didn’t need to be preselectedから始めます。

If we want to expand our form now with an update functionality、つまり、前に作成したレコードに戻り、フォームに既存のデータを入力してから、the option needs to be selectedを入力します。

これは、th:selected属性をいくつかの条件とともに追加することで実現できます。

上記の例では、iが75に等しいかどうかを確認して、75の値を事前に選択します。

ただし、this code won’t work,とレンダリングされたHTMLは次のようになります。

これを修正するには、th:fieldを削除し、nameおよびid属性に置き換える必要があります。

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

いつものように、ディスカッション中に使用されたコードはover on GitHubにあります。