セレクトボックスを同期させるには？

Question

リンク内容を参考に
JSP+Postgresql11+eclipse2019-06で作成しています。
PostgresqlのデータをCRUD出来るところまでは出来ましたが
セレクトボックスの動作部分で躓いています。

セレクトボックス[会社名]テーブル

co_id	company
1	IDが１の会社
2	IDが２の会社
3	IDが３の会社

レコード一覧[営業日報]テーブル
|pdr_id|record_date|co_id|fi_id|st_id|ag_id|sl_id|quantity
|--:|--:|--:|--:|--:|--:|--:|
|1|20190910|2|2|2|2|2|15.9
|2|20190829|1|1|1|1|5|24.3
|31|20190911|3|2|2|2|2|15.9

緑〇の[会社名（セレクトボックス）]を
赤〇の[会社名（テキストボックス）]と
下の一覧レコードの[会社名]と同期させるにはどのようなロジックにすればよいでしょうか？
なお、セレクトボックス以外は下の一覧レコードと同期していて
新規入力、更新、削除が出来ています。

controller部分、model部分、DAO部分ありますが文字数の関係で全て掲載できないようなので
以下に.jsp部分を掲載させていただきます。
[データソース部分とかlistで持ってくる方法がわからずべた書きしていますが、一応解決できました。]

Comments

[Orlofsky]

URLは https://teratail.com/help/question-tips#questionTips3-7 の [リンク] に修正してください。

[m.ts10806]

何をしたときに同期したいんですか？

[退会済みユーザー]

[リンク]修正しました。

レコードを一覧表示しているフォームの[更新]ボタンを押して上の１レコード分の[更新]フォームで
セレクトボックスがco_idで表示されるようにです。

Answer 1

ボタン押下時にIDをもってAjaxで通信し、Javaを実行
Javaでは受け取ったIDでデータを取得する処理を流しjson形式などで返す
Ajaxの返り値でそれぞれの入力コントロールに初期値として設定

Comments

[退会済みユーザー]

・ボタン押下時にIDをもってAjaxで通信し．．．
IDをもつ？Ajaxで通信．．．１行目からわからないです。

[m.ts10806]

どんな方法でも良いです。
data属性でもいいしなんでもいい。JavaScriptから取得可能であればいいです。
Ajaxについては調べてください。

[退会済みユーザー]

お世話になっております。
<script type="text/javascript">document.getElementById('セレクトボックスのID').value = 'DBのco_idの値';</script>
でセレクトボックスをDBのco_idで選択状態にできることはわかりましたが、どうすれば[更新]ボタンで選択されたDBのpdr_id(主キー)のco_idの値をとれるのかがわかりません。

[m.ts10806]

Ajaxです。

[退会済みユーザー]

かなり時間がかかってしまい、また、結局jsonはなんとなく理解できましたがAjaxを使った方法がわかりませんでしたが、とりあえず部分的にはJavaScriptから取得するようにできたと思います。ありがとうございました。

Answer 2

// production_daily_report一覧表示リスト取得
<%
	List<Production_daily_report> list = (List<Production_daily_report>) request.getAttribute("list");
	Production_daily_report production_daily_report_model = (Production_daily_report) request
			.getAttribute("production_daily_report");
	String co_id = production_daily_report_model == null
			? ""
			: String.valueOf(production_daily_report_model.getCo_id());
	String company = production_daily_report_model == null ? "" : production_daily_report_model.getCompany();
%>

// セレクトボックスcompanyのデータソース
<%
	Connection SelCompanyDb = null;
	PreparedStatement SelCompanyPs = null;
	ResultSet SelCompanyRs = null;
	Class.forName("org.postgresql.Driver");
	SelCompanyDb = DriverManager
			.getConnection("jdbc:postgresql://localhost:5433/ncdb?user=ncadmin&password=nc1");
	String SelCompanySQL = "SELECT * FROM t_company ORDER BY co_id";
	SelCompanyPs = SelCompanyDb.prepareStatement(SelCompanySQL);
	SelCompanyRs = SelCompanyPs.executeQuery();
%>

// production_daily_report一覧表示リストのco_idへ値設定
<script language="JavaScript">
function setCo_id(txt)
{
	document.production_daily_report_form.co_id.value = txt;
}
</script>

<div class="form-group">
	<!--<label for="co_id">施工者（テキストボックス）:</label> -->
	<input type="hidden" id="co_id" name="co_id" class="form-control"
		style="width: 0px;" value="<%=co_id%>">
</div>
<div class="form-group">
	<label for="co_id">施工者:</label> 
	// onchangeでhiddenテキストボックスco_idに値設定
	<select
		onChange="setCo_id(this[this.selectedIndex].value)"
		id="Selco_id" name="company" class="form-control"
		style="width: 150px;">
		<%
			while (SelCompanyRs.next()) {
		%>
		<option value="<%=SelCompanyRs.getString("co_id")%>"><%=SelCompanyRs.getString("company")%></option>
		<%
			}
		%>
	</select>
	<script type="text/javascript">
		// .valueプロパティでhiddenテキストボックスco_idからセレクトボックスSelco_idへ取得
		document.getElementById('Selco_id').value = "<%=co_id%>";
	</script>
</div>

上手に表現できませんが
・追加時はセレクトボックスのonchangeでhiddenテキストボックスにidを設定
・編集時はレコード一覧からco_idを取ってきてhiddenテキストボックスを介してフォームのセレクトボックスへidとvalueを設定
・更新時はhiddenテキストボックスのidで設定
という仕組みで実現できました。