jsp・js間のデータ受け渡し方法

###前提・実現したいこと
java、springにてDB(mysql)を検索した結果を表示する
プログラムを作成しようとしています。

その際に、検索条件をプルダウンで選択できるようにしようとしており、
そのプルダウンの内容をDBから取得した値を表示させたい。

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

DBから取得した内容をどのようにすればJavaScriptに渡せばよいかわからない。

###該当のソースコード

java(Controller)

	public String xxx(Model model) {

		List<Map<String, Object>> list = jdbcTemplate.queryForList(
				"select CODE,CODE_NAME from yyy);
		model.addAttribute("list", list);

		return "zzz";
}

DBデータ

テーブル：yyy
CODE | CODE_NAME
1    | test1
2    | test2
3    | test3

jsp

<body onLoad="function1()">
	<form name="Conditions" onChange="function1()">
		条件1 <select name="Condition1">
			<option value="1" selected>aaa</option>
			<option value="2">bbb</option>
			<option value="3">ccc</option>
		</select>
		<select name="Condition2">
		</select>
	</form>
</body>

js

function function1() {
	var select1 = document.forms.Conditions.Condition1;
	var select2 = document.forms.Conditions.Condition2;
	select2.options.length = 0;
	
	if (select1.options[select1.selectedIndex].value == "1") {
		//ここにDBから取得した値を表示するようにしたい
		//select2.options[0] = new Option("test1");
		//select2.options[0] = new Option("test2");
		//select2.options[0] = new Option("test3");
	} else if (select1.options[select1.selectedIndex].value == "2") {
		select2.options[0] = new Option("abc");
		select2.options[1] = new Option("def");
	} else if (select1.options[select1.selectedIndex].value == "3") {
		select2.options[0] = new Option("ghi");
		select2.options[1] = new Option("jkl");
	}

###実施事項
下記コードでDBからデータを取得できていることは確認できましたが、
listをどのようにjsに受け渡し、表示させるのかがわかっていません。

jsp

<select name="conditions">
	<c:forEach var="tmp" items="${list}">
		<option value="${tmp.CODE}"><c:out value="${tmp.CODE_NAME}" /></option>
	</c:forEach>
</select>

###補足情報(言語/FW/ツール等のバージョンなど)
言語：java,javaScript,jsp
フレームワーク:Spring

行動規範の内容に同意します

回答1件

ベストアンサー

Select1の変更イベントでSelect2の中身を書き換えたいというのであれば、
Select1のチェンジイベントで、

A) サブミットしてselect2の結果をとってくる。
フォームはオンロードで書き換える。（たぶん、これではない）
B) ajaxでpostし、要求すると、検索結果がコールバック関数に返ってくる。
そのコールバック関数の中で、結果を用いて書き換える

の、B)が望む要求仕様を満たす動作だと思われます。

投稿2016/11/16 06:05

akio221

総合スコア716

HunterG

2016/11/16 07:50

説明力&理解力が足りなくて申し訳ありません。やりたいこととしては、Controllerで取得したlistをjsに渡し、その内容をforeach等ですべて表示しようとしているので、 listをjsに渡す方法が知りたいです。 ※見当違いの事を言っていたら申し訳ありません。

akio221

2016/11/16 08:11

私の回答はajaxで呼び出して、コントローラからJSONで返し、そのままjavascript内で利用してはいかが、という意味でしたが、コントローラで受け取ったlistをスクリプト化したい、ということですか？たとえば、JSPに、scriptタグで、 ``` <script type="text/javascript"> function selectReload(selected) { $('#select1 > option').remove(); switch (selected) case 1: <c:forEach var="tmp" items="${list1}"> $('#select1').append($('<option>').html('<c:out value="${tmp.CODE_NAME}" />').val('<c:out value="${tmp.CODE}" />')); </c:forEach> break; case 2: //以下略 <c:forEach var="tmp" items="${list2}"></c:forEach> break; } </script> ``` と言ったものを書くような？（お勧めはできませんが・・）

HunterG

2016/11/18 09:13

失礼いたしました。自分が考えていた方法では、マッピングリストの状態でデータを取得できませんでした。ご指摘いただいた通り、ajaxを使用した結果データを取得することができました。ありがとうございます。

行動規範の内容に同意します