Thymeleafでセレクトボックス(select)の選択値に応じて連動させる方法

Java Thymeleaf

Thymeleafでセレクトボックス(select)の選択値に応じて連動させる方法

セレクトボックスの選択値に応じて連動させるには、JavaScriptを使って動的にセレクトボックスの内容を変更する方法が一般的です。
以下はThymeleafとJavaScriptを組み合わせて、セレクトボックスの連動処理を実装する例です。

Thymeleafテンプレート

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>セレクトボックスの連動</title>
  <script>
    function updateSubCategory() {
      var mainCategory = document.getElementById('mainCategory').value;
      var subCategory = document.getElementById('subCategory');
      subCategory.innerHTML = ''; // 現在の選択肢をクリア

      var options = {
        'electronics': ['テレビ', 'ラジオ', 'パソコン'],
        'furniture': ['テーブル', '椅子', 'ソファ']
      };

      if (options[mainCategory]) {
        options[mainCategory].forEach(function(item) {
          var option = document.createElement('option');
          option.value = item;
          option.text = item;
          subCategory.add(option);
        });
      }
    }
  </script>
</head>
<body>
  <form action="#" th:action="@{/submit}" method="post">
    <label for="mainCategory">メインカテゴリ:</label>
    <select id="mainCategory" name="mainCategory" onchange="updateSubCategory()">
      <option value="">選択してください</option>
      <option value="electronics">電子機器</option>
      <option value="furniture">家具</option>
    </select>

    <label for="subCategory">サブカテゴリ:</label>
    <select id="subCategory" name="subCategory">
      <option value="">メインカテゴリを選択してください</option>
    </select>

    <input type="submit" value="送信">
  </form>
</body>
</html>

コントローラー

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.ui.Model;

@Controller
@RequestMapping("/submit")
public class FormController {

  @GetMapping
  public String showForm(Model model) {
    return "form";
  }

  @PostMapping
  public String handleForm(@RequestParam String mainCategory, @RequestParam String subCategory, Model model) {
    model.addAttribute("mainCategory", mainCategory);
    model.addAttribute("subCategory", subCategory);
    return "result";
  }
}

フォームクラス

public class FormData {

  private String mainCategory;
  private String subCategory;

  // ゲッターとセッター
  public String getMainCategory() {
    return mainCategory;
  }

  public void setMainCategory(String mainCategory) {
    this.mainCategory = mainCategory;
  }

  public String getSubCategory() {
    return subCategory;
  }

  public void setSubCategory(String subCategory) {
    this.subCategory = subCategory;
  }
}

この例では、mainCategoryの選択が変更されると、JavaScript関数updateSubCategory()が呼び出され、subCategoryの選択肢が更新されます。
フォームの送信後は、選択した値がコントローラーに送信され、処理されます。