Thymeleafでセレクトボックス(select)の処理を実装

Java Thymeleaf

Thymeleafでセレクトボックス(select)の処理を実装

Thymeleafでセレクトボックスの処理を実装するための例を以下に示します。
これには、フォームのクラス、コントローラの処理、およびThymeleafテンプレートが含まれています。

1. フォームクラス

まず、フォームのクラスを作成します。
このクラスは、セレクトボックスの選択肢を保持します。

// src/main/java/com/example/demo/form/SelectForm.java
package com.example.demo.form;

public class SelectForm {
  private String selectedOption;

  public String getSelectedOption() {
    return selectedOption;
  }

  public void setSelectedOption(String selectedOption) {
    this.selectedOption = selectedOption;
  }
}

2. コントローラ

次に、コントローラの処理を作成します。
ここでは、セレクトボックスの選択肢をモデルに追加し、フォームのデータを処理します。

// src/main/java/com/example/demo/controller/SelectController.java
package com.example.demo.controller;

import com.example.demo.form.SelectForm;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ModelAttribute;

import java.util.Arrays;
import java.util.List;

@Controller
public class SelectController {

  @GetMapping("/select")
  public String showForm(Model model) {
    SelectForm form = new SelectForm();
    model.addAttribute("selectForm", form);

    List<String> options = Arrays.asList("Option 1", "Option 2", "Option 3");
    model.addAttribute("options", options);

    return "selectForm";
  }

  @PostMapping("/select")
  public String submitForm(@ModelAttribute SelectForm selectForm, Model model) {
    model.addAttribute("selectedOption", selectForm.getSelectedOption());
    return "result";
  }
}

3. Thymeleafテンプレート (フォーム)

次に、セレクトボックスを含むフォームのThymeleafテンプレートを作成します。

<!-- src/main/resources/templates/selectForm.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>セレクトボックスのフォーム</title>
</head>
<body>
  <form th:action="@{/select}" th:object="${selectForm}" method="post">
    <label for="select">選択してください:</label>
    <select id="select" th:field="*{selectedOption}">
      <option th:each="option : ${options}" th:value="${option}" th:text="${option}"></option>
    </select>
    <button type="submit">送信</button>
  </form>
</body>
</html>

4. Thymeleafテンプレート (結果表示)

最後に、選択された値を表示するための結果表示テンプレートを作成します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <p>選択されたオプション: <span th:text="${selectedOption}"></span></p>
  <a href="/select">戻る</a>
</body>
</html>

これで、セレクトボックスを使ったフォームの作成と処理が完了です。
フォームを表示し、選択されたオプションを処理して結果を表示する一連の流れを実装できます。