Thymeleafでドロップダウンの処理を実装

Java Thymeleaf

Thymeleafでドロップダウンの処理を実装

Thymeleafでドロップダウンリストの処理を実装する例を示します。
以下は、SpringBootとThymeleafを使ったサンプルコードです。
フォームで送信するまでの流れを含んでいます。

1. フォーム用のクラス

まず、フォームデータを保持するクラスを作成します。

package com.example.demo.form;

import java.util.List;

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

  // ゲッターとセッター
  public String getSelectedValue() {
    return selectedValue;
  }

  public void setSelectedValue(String selectedValue) {
    this.selectedValue = selectedValue;
  }

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

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

2. コントローラー

次に、コントローラーを作成し、フォームデータをThymeleafのテンプレートに渡します。

package com.example.demo.controller;

import com.example.demo.form.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;

@Controller
public class DropdownController {
  @GetMapping("/dropdown")
  public String showForm(Model model) {
    DropdownForm form = new DropdownForm();
    form.setOptions(Arrays.asList("オプション1", "オプション2", "オプション3"));
    model.addAttribute("dropdownForm", form);
    return "dropdown";
  }

  @PostMapping("/dropdown")
  public String submitForm(@ModelAttribute DropdownForm dropdownForm, Model model) {
    model.addAttribute("selectedValue", dropdownForm.getSelectedValue());
    return "result";
  }
}

3. 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="dropdown">選択してください:</label>
    <select id="dropdown" th:field="*{selectedValue}">
      <option th:each="option : ${dropdownForm.options}" th:value="${option}" th:text="${option}">オプション</option>
    </select>
    <button type="submit">送信</button>
  </form>
</body>
</html>

4. Thymeleafテンプレート (result.html)

フォームの送信結果を表示するためのテンプレートも作成します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>送信結果</title>
</head>
<body>
  <h1>選択された値: <span th:text="${selectedValue}"></span></h1>
  <a href="/dropdown">戻る</a>
</body>
</html>

このコードでは、ユーザーがドロップダウンから選択し、フォームを送信すると、選択された値がresult.htmlに表示されるようになります。