Thymeleafでプルダウンの選択値に応じて連動させる方法

Java Thymeleaf

Thymeleafでプルダウンの選択値に応じて連動させる方法

Thymeleafでプルダウンの選択値に応じて連動させる方法を実装するには、JavaScriptとThymeleafを組み合わせて行います。
以下は、国と都市の選択肢を例にした実装例です。

Thymeleafテンプレート

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>プルダウン連動</title>
  <script>
    function updateCities() {
      const country = document.getElementById("country").value;
      const cities = JSON.parse(document.getElementById("citiesData").textContent);
      const citySelect = document.getElementById("city");

      // 既存の選択肢をクリア
      citySelect.innerHTML = "";

      // 新しい選択肢を追加
      cities[country].forEach(city => {
        const option = document.createElement("option");
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
      });
    }
  </script>
</head>
<body>
  <form>
    <label for="country">国を選択:</label>
    <select id="country" name="country" onchange="updateCities()">
      <option value="日本">日本</option>
      <option value="アメリカ">アメリカ</option>
    </select>

    <label for="city">都市を選択:</label>
    <select id="city" name="city">
      <!-- 初期値 -->
    </select>
    
    <button type="submit">送信</button>
  </form>

  <script id="citiesData" type="application/json">
    {
      "日本": ["東京", "大阪", "京都"],
      "アメリカ": ["ニューヨーク", "ロサンゼルス", "シカゴ"]
    }
  </script>
</body>
</html>

説明

  • updateCities 関数は国のプルダウンの変更時に呼び出され、対応する都市のプルダウンを更新します。
  • citiesData は各国に対応する都市のデータを含むJSON形式のスクリプトです。

この例では、国を選択すると、その国に対応する都市のリストが更新されます。