質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4574閲覧

Java Spring BootでDropDownListの初期値をDBの値とする方法

退会済みユーザー

退会済みユーザー

総合スコア0

PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/07/30 01:34

編集2019/07/30 05:04

DropDownListの初期値をDBの値とする方法

SpringBootでHTMLにDBのテーブルデータを一覧表示しており
その中の列にDoropDownlistを置いて(データソースもDBからです)値を表示・選択しようとしているのですが
現状だとDoropDownlistの初期値がすべての行で先頭の値が指定されてる状態です。
これをDBの値と連動するにはどのようにすればよいのでしょうか?

発生している問題・エラーメッセージ

該当のソースコード

sql

1st_id Integer PRYMARYKEY 2strength Text

java

1package com.ncapl.pro; 2 3import java.util.List; 4import java.util.Map; 5 6import org.springframework.beans.factory.annotation.Autowired; 7import org.springframework.jdbc.core.JdbcTemplate; 8import org.springframework.stereotype.Controller; 9import org.springframework.ui.Model; 10import org.springframework.web.bind.annotation.RequestMapping; 11 12@Controller 13public class Test { 14 15 @Autowired 16 JdbcTemplate jdbcPostgres; 17 18 @RequestMapping("/test") 19 public String test(Model model) { 20 List<Map<String,Object>> list; 21 list = jdbcPostgres.queryForList("select * from t_strength"); 22 model.addAttribute("st_id", list); 23 model.addAttribute("strength", list); 24 return "test"; 25 } 26}

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>test</title> 6 <link rel="stylesheet" type="text/css" href="master.css" /> 7</head> 8<body> 9 10 11<table id="strength" class="table table-striped table-bordered table-hover table-condensed"> 12 <tr> 13 <th>No.</th> 14 <th>列1</th> 15 </tr> 16 <tr th:each="strength : ${strength}"> 17 <td align="left" th:text="${strength.st_id}"></td> 18 <td align="left"> 19 <div> 20 <select id="st_id" name="strength"> 21 <option th:each="strength : ${st_id}" 22 th:value="${strength.st_id}" 23 th:selected="${strength.st_id == st_id}" 24 th:inline="text">[[${strength.strength}]] 25 </option> 26 </select> 27 </div> 28 </td> 29 </tr> 30</table> 31</body> 32</html>

試したこと

th:selected="${strength.st_id == st_id}"のように設定しても
テーブルの先頭の値が初期値になってしまいます。
イメージ説明

ご指摘のとおり重複IDを下記のとおり変更したところDBの初期値を表示させることが出来ました。

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<title>test</title> 6<link rel="stylesheet" type="text/css" href="master.css" /> 7</head> 8<body> 9 <table id="t_strength" 10 class="table table-striped table-bordered table-hover table-condensed"> 11 <tr> 12 <th>No.</th> 13 <th>列1</th> 14 </tr> 15 <tr th:each="strength : ${strength}"> 16 <td align="left" th:text="${strength.st_id}"></td> 17 <td align="left"> 18 <div> 19 <select id="st_Id" name="Strength"> 20 <option th:each="Strength : ${st_id}" th:value="${strength.st_id}" 21 th:selected="${strength.st_id == st_Id}" th:inline="text">[[${strength.strength}]] 22 </option> 23 </select> 24 </div> 25 </td> 26 </tr> 27 </table> 28</body> 29</html>

しかし、ドロップダウンすると以下のようにその値一色(リスト内が同じ値)になってしまいます。
イメージ説明
表示(初期値)は現在のDBの値とするけれど、変更可能なようにドロップダウン自体リスト表示は可能でしょうか?

補足情報(FW/ツールのバージョンなど)

java spring boot
IDE:eclipse 2019-06
DB:postgresql 11

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

見た感じループの中で変数上書きしてませんか?(Javaでそれができるとは思えないけど・・)
strength 、st_id などぱっと見、今Listなのか値なのか見分けがつきません。
th:selectedの構文自体は合ってるように見えますので、きちんと想定通りの値がきていないだけにも思います。
※念のため、ブラウザの「ソースを表示」からHTMLがどうなってるか確認してください

蛇足:

<select id="st_id" name="strength">

ループの中でこれだと同じページに重複IDができてしまうことになるのでこれはHTML的にNGです。
IDは一意の名前をそれぞれつけましょう。
あとnameも同じだと1つしか送信されなくなります。

投稿2019/07/30 01:42

編集2019/07/30 01:44
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/07/30 02:24

これはかなりの違和感・・・。 でもこれに慣れるとあまり良くなさそうですね。
退会済みユーザー

退会済みユーザー

2019/07/30 02:31

こっちになれてたからPHP なぜうけとれないんだよと文句いってたw
m.ts10806

2019/07/30 02:33

ありそう・・。 ラジオボタンと仕組み的には同等になるので当然と言えば当然なんですけどね。
A-pZ

2019/07/30 03:19

name属性が同じ名前のパラメータがある場合は、複数送信されます。
退会済みユーザー

退会済みユーザー

2019/07/30 03:58

ありがとうございます! <select id="st_Id" name="Strength"> <option th:each="Strength : ${st_id}" とすることでDBの値と連動することが出来ました。 ただ、表示はされたもののdropdownlist自体もすべてその値になってしまうのですが 何か間違っているからでしょうか?
m.ts10806

2019/07/30 03:59

質問にコードを追記してください。
m.ts10806

2019/07/30 04:50

投稿編集についてはteratailのバグもあるようですので、何度かやってみてください。 コメント欄ではマークダウン利用できませんし、インデントもきかないのでコードの把握が簡単ではないので
guest

0

ベストアンサー

直接の回答にはなりませんが、こう書くこともできるという1例で参考になれば幸いです。

サンプルコード

コントローラー

@GetMapping(value = "list") public String list(Model model) { // optionのマスタデータを想定 Map<String ,String> options = new TreeMap<>(); options.put("18", "【18】"); options.put("21", "【21】"); options.put("24", "【24】"); options.put("27", "【27】"); options.put("30", "【30】"); options.put("33", "【33】"); options.put("36", "【36】"); options.put("40", "【40】"); model.addAttribute("options", options); // DBのデータを想定 List<Map<String, Object>> list = new ArrayList<>(); list.add(createItem(1, "18")); list.add(createItem(2, "18")); list.add(createItem(3, "21")); list.add(createItem(4, "40")); list.add(createItem(5, "27")); list.add(createItem(6, "24")); list.add(createItem(7, "33")); list.add(createItem(8, "36")); list.add(createItem(9, "30")); model.addAttribute("strengthList", list); return "list"; } private Map<String, Object> createItem(int id, String strength) { Map<String, Object> item = new HashMap<>(); item.put("st_id", Integer.valueOf(id)); item.put("strength", strength); return item; }

テンプレート

<table> <tr> <th>No.</th> <th>列1</th> </tr> <tr th:each="strength : ${strengthList}"> <td align="left" th:text="|${strength.st_id} (${strength.strength})|"></td> <td align="left"> <select name="strength"> <option th:each="option : ${options}" th:value="${option.key}" th:text="${option.value}" th:selected="${strength.strength} == ${option.key}"></option> </select> </td> </tr> </table>

表示されるページ

イメージ説明

解説

DropDownListの描画

それぞれのselect要素を描画するためのマスタデータとしてコントローラで以下のMapにデータを用意します。

Map<String ,String> options = new TreeMap<>(); options.put("18", "【18】"); options.put("21", "【21】"); options.put("24", "【24】"); // ...省略...

このMapを使ってselect要素を描画します。描画結果のhtmlは以下の通りです。Mapのキーがoption要素のvalueになり、Mapの値がoption要素のテキストとして使われます。

<select name="strength"> <option value="18">【18】</option> <option value="21">【21】</option> <option value="24">【24】</option> <option value="27">【27】</option> <option value="30">【30】</option> <option value="33">【33】</option> <option value="36">【36】</option> <option value="40">【40】</option> </select>

テーブルの描画

テーブルの行を描画するためのデータとしてコントローラで以下のListにデータを用意します。

List<Map<String, Object>> list = new ArrayList<>(); list.add(createItem(1, "18")); list.add(createItem(2, "18")); // ... 省略 ...

このListのデータは以下のようなテーブルからデータを取得したという想定です。

+-----+--------+ |st_id|strength| +-----+--------+ |1 |18 | |2 |18 | |3 |21 | |4 |40 | |5 |27 | |6 |24 | |7 |33 | |8 |36 | |9 |30 | +-----+--------+

描画されるtr要素は以下の通りです。
No.列のテキストはデバッグしやすいように"st_id (strength)"というフォーマットで表示しています。
この行はst_idが1、strengthが"18"のデータを表示しているということがわかります。

<tr> <td align="left">1 (18)</td> <td align="left"> <select name="strength"> <option value="18" selected="selected">【18】</option> <option value="21">【21】</option> <option value="24">【24】</option> <option value="27">【27】</option> <option value="30">【30】</option> <option value="33">【33】</option> <option value="36">【36】</option> <option value="40">【40】</option> </select> </td> </tr>

この行のstrengthが"18"のとき、option要素の"18"を初期表示にしたいのであれば、th:selectedで比較するのは
行のデータを保持するstrength変数のstrengthとoption要素のデータを保持するoption変数のkey(htmlでいえばoptionのvalue)ということになります。

th:selected="${strength.strength} == ${option.key}"

質問文のコードではstrengthという変数が多用されているので分かりずらいコードになっていると思いました。
変数名の付け方を工夫することで分かりやすくなると思います。

投稿2019/08/07 11:49

rubytomato

総合スコア1752

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問