Thymeleafでプルダウンの処理を実装

Java Thymeleaf

Thymeleafでプルダウンの処理を実装

Thymeleafでプルダウンメニューを使用してフォームを作成する方法を示します。
以下に、サーバーサイドのクラス、Thymeleafテンプレート、およびフォームを送信するためのサンプルコードを示します。

サーバーサイドのクラス

まず、プルダウンメニューの選択肢を管理するためのクラスを作成します。

package com.example.demo.model;

import java.util.List;

public class DropdownForm {
  private String selectedOption;
  private List<String> options;

  public DropdownForm() {
    // コンストラクタ
  }

  public String getSelectedOption() {
    return selectedOption;
  }

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

  public List<String> getOptions() {
    return options;
  }

  public void setOptions(List<String> options) {
    this.options = options;
  }
}

コントローラー

次に、コントローラークラスを作成してフォームを処理します。

package com.example.demo.controller;

import com.example.demo.model.DropdownForm;
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 DropdownController {
  @GetMapping("/dropdown")
  public String showForm(Model model) {
    DropdownForm form = new DropdownForm();
    List<String> options = Arrays.asList("Option 1", "Option 2", "Option 3");
    form.setOptions(options);
    model.addAttribute("dropdownForm", form);
    return "dropdown";
  }

  @PostMapping("/dropdown")
  public String submitForm(@ModelAttribute DropdownForm dropdownForm, Model model) {
    // フォームデータの処理
    model.addAttribute("selectedOption", dropdownForm.getSelectedOption());
    return "result";
  }
}

Thymeleafテンプレート（dropdown.html）

Thymeleafテンプレートでプルダウンメニューを作成します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>プルダウンメニュー</title>
</head>
<body>
  <form th:action="@{/dropdown}" th:object="${dropdownForm}" method="post">
    <label for="option">選択肢:</label>
    <select id="option" th:field="*{selectedOption}">
      <option th:each="option : ${dropdownForm.options}" th:value="${option}" th:text="${option}"></option>
    </select>
    <button type="submit">送信</button>
  </form>
</body>
</html>

Thymeleafテンプレート（result.html）

選択したオプションを表示するためのテンプレートです。

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

このサンプルコードでは、DropdownFormクラスを使ってプルダウンメニューの選択肢を管理し、DropdownControllerでそのフォームを処理します。
dropdown.htmlテンプレートはプルダウンメニューを表示し、result.htmlテンプレートは選択したオプションを表示します。