thymeleafでセレクトボックス切り替え時に他のボックス内容を変更したい

Question

お世話になります。
至極基本的な質問と思われますが、どの方向で調べたら正しいかも迷ってしまったのでこちらに質問します。

開発環境

• OS Windows10 professional x64
• IDE Eclipse 4.8 Photon
• Thymeleaf 3.0.2.RELEASE
• 言語 Java
• TOMCAT 9.0.30
• Java 11
• プロジェクト形式 Gradleプロジェクト

参考画面

実現したいこと

「部門」で選択が切り替えられた時に「DPT」に紐づく課を表示したいです。
「部門」、「DPT」ともDBテーブルで持ってくる想定で別テーブルになっています。

問題というか悩んでいる事

このような時、一般的にどう実装するのかが分かっていないです。
乏しい知識でこんな感じかなと思っているのは

1. 番号リストController側で「部門」と「DPT」のデータをDBから取得
2. Mapかなにかに「部門」と「DPT」のデータを格納してViewに渡す
3. View側では「部門」はそのままDBのデータをセレクトボックスにセット
4. 「DPT」は「部門」が切り替えられた時にJavascriptで「DPT」のデータを絞り込んで「DPT」のセレクトボックス

上記のような方法です。
JavascriptでどのようにControllerから渡された値（model.addattributeした値）にアクセスするかもよく分かってないですが...

識者の方々、一般的な実装を教授頂けないでしょうか。
できればThymeleafだけで完結したいです。（セレクトボックスが切り替えられた時という条件があるので無理なのかなぁとは思ていますが）

Answer 1

JavascriptでどのようにControllerから渡された値（model.addattributeした値）にアクセスするかもよく分かってないですが...

こちらの記事ThymeleafでHTMLにJavaScript変数を埋め込む方法が参考になるかと思います。
この記事で紹介されている通り、コントローラーで作成したセレクトボックスのデータをHTMLページにJavaScriptの変数として埋め込むことが可能です。
あとはJavaScriptで「部門」が変更されたら「DPT」のアイテムを入れ替えるという処理を実装すればいいと思います。

できればThymeleafだけで完結したいです。

JavaScriptのコードを書きたくない、ということであれば部門のセレクトボックスのアイテムが選択されるたびにリクエストしてページをリロードするという方法があります。
コントローラーのメソッドに部門を指定する引数を追加し（例えば"/hoge?bumon=xxx"のように）、部門のセレクトボックスのアイテムが変更されたら、bumon=xxxの部分をセットしてリクエストします。
この引数の値をもとにThymeleafで部門とDPTのセレクトボックスを描画することができます。
この方法であれば、完全にJavaScriptの処理を無くすことはできませんが、全アイテムのデータをJavaScriptの変数として埋め込んでおく必要は無くなります。

一般的な実装を教授頂けないでしょうか。

アプリケーションの規模、要件、チームの開発方針などで実装方針が決まると思っているので、なにが一般的かというのは私には答えられませんが、私の経験的に多く見てきたのはアイテムの取得をAPI化するという方法です。

DPTのデータを返すAPIを実装し、HTMLページ上で部門のセレクトボックスのアイテムが変更されたらAPIをコールし、そのデータでDPTのセレクトボックスのデータを書き換えるという方法です。

業務でのことであれば、実装の仕方は開発チームの責任者に相談するのが一番だと思いますが、勉強でのことであれば上記の3通りを試してみて、それぞれの一長一短を経験することもいいかもしれません。

Comments

[makoyang]

回答ありがとうございます！

知りたいポイントを察して頂いて助かりました。
今回のアプリ、業務なのですが、小さいアプリで一人で開発していたのです。
教えて頂いた方法も含め色々試して検討したいと思います。