htmlで生成したListをjavaに返す

いつもお世話になっております。
早速本題に入らせていただきます。
やりたいこと

上記の画像の[Exce]ボタンの右側にもう１つ枠を用意し選択した要素を
右側の枠に移動し右側のものをList化してjava側に返したいのです。

画像では[要素１]となっていますが、本来は人名がはいっています。

その人名をList化して送り返したいです。

進捗

上記の画面までは自分で実装することができました。
しかし今のやり方だともう一度「田中十八朗」さんのみを選択し追加すると
右側のリストの「田中十九朗」さんが書き換わってしまいます。

原因は
右側のリストの長さを固定値で作ってしまっていること
javascriptのfor文がおかしいこと
とわかってはいるのですが、解決方法がわかりません。

一番いいのは可変長のリストを生成することなのですが、生成の仕方がわからず。
リストへの挿入方法も、作成したリストの表示方法もわかりません。

どなたかご教授願います。

進捗2

回答者様のやり方でやったらリストボックス間の移動と動的なリスト生成ができました。
ありがとうございました。

もう１つ疑問点があります。
それは動的生成（今回であれば右側のリスト）をjava側に返す方法です。

こちらも回答者様のやり方でやってみたのですがNULLが帰ってきてしまいます。
どこが悪いのかどなたかご教授願えないでしょうか。

疑問点

Nullが帰ってくる理由を考えたんですが、
右側のリストはhtmlで作ってしまっているためStruts2のactionのような受け渡しができないんじゃないか
という疑問が浮かび上がってきました。

これは可能なのでしょうか？
自分の送り方が悪いのでしょうか？
よろしくお願いします。

現在までの進捗具合

javaはフレームワークとしてStruts2を使っており、Beanを使用して左側のリストを作成しています。

html
1
2<!-- 右側リスト -->
3<div class="ib-box" >
4	<form name="recipientList" action="" >
5		<select id="rList" name="rList" multiple  style="width: 140px;" size="10"  >
6    </select>
7	</form>
8</div>
9
10<!-- 送信ボタン -->
11<div class="ib-box" >
12	<div class="buttonGroup">
13		<s:submit method="debug" value="送信"/>
14	</div>
15</div>
16

java
1//選択グループ取得用
2private List<String> rList;
3public List<String> getrList() {return rList;}
4public void setrList(List<String> rList) {this.rList = rList;}
5
6//push照会側の検索ボタンを押した処理
7public String debug() throws Exception {
8	if(this.rList == null){
9			System.out.println("null");
10	}else{
11			System.out.println("Notnull");
12	}
13	return "success";
14}
15
16

のような実装をしています。(フェイクのため誤字脱字があるかも知れません)

希望的観測

上記はリストの見出しの値に裏で別の値を持たせられるらしく課帰結しました。
あとはその情報をjavaでどう抜き出せばいいかだけです。

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

回答3件

ベストアンサー

ボックスからボックスへは下記のように送れば出来ます。下記コードは同じ項目を2回入れないようにするなどのチェック機構は入れていません。（追加する前にチェックすればよいです）

JavaScript
1function OnceSelect(){
2	var i
3	  , select1 = document.getElementById( 'Select1' )
4	  , select2 = document.getElementById( 'Select2' )
5	  , options = select1.options
6	  , l = options.length
7	  , option
8	  ;
9	for ( i = 0; i < l; i++ ) {
10		if ( options[ i ].selected === true ) {
11			option = document.createElement( 'option' );
12			option.innerHTML = options[ i ].text;
13			option.setAttribute( 'value', options[ i ].value );
14			select2.appendChild( option );
15		}
16	}
17}

HTML
1<form name="eList" action="">
2	<select id="Select1" name="Select1" multiple>
3		<option value="1">A</option>
4		<option value="2">B</option>
5		<option value="3">C</option>
6		<option value="4">D</option>
7		<option value="5">E</option>
8	</select>
9</form>
10
11<input type="button" value="Exec" onclick="OnceSelect();" />
12
13<form name="receptList" action="">
14	<select id="Select2" name="Select2" multiple>
15	</select>
16</form>

CSS
1select {
2	width: 5em;
3}

動くサンプル：https://jsfiddle.net/56exhe7h/

【select 内の option 要素(セレクトボックス)を JavaScript で追加していく | Flashlight Mutous】
http://isthmis.me/Blog/javascript-selectbox/

投稿2016/07/07 18:57

kei344

総合スコア69407

settyan

2016/07/08 05:14

上記の内容で動きました！ありがとうございました！

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

右側のセレクトボックスにname属性がついていないので、つけましょう。例えば selection と名前をつけておき、それを受けるActionクラスでは次のようにします。

java
1public class SelectionAction extends ActionSupport {
2
3	public String execute() throws Exception {
4		//....Actionメソッドの実装....
5	}
6
7	private List<String> selection;
8
9	public List<String> getSelection() {
10		return selection;
11	}
12
13	public void setSelection(List<String> selection) {
14		this.selection = selection;
15	}
16
17}

投稿2016/07/07 12:52

編集2016/07/07 12:53

A-pZ

総合スコア12011

settyan

2016/07/08 05:20

上記に質問を設けさせていただきました。お時間の都合があればご回答お願いします。

A-pZ

2016/07/08 08:15

name属性にrListとつけたのでしたら、受け取るActionクラスには次のフィールドとget/setメソッドをつければ受け取れるでしょう。 private List<String> rList; public List<String> getrList() { return rList; } public void setrList(List<String> rList) { this.rList = rList; }

settyan

2016/07/08 08:26 編集

ご解答ありがとうございます。申し訳ないのですがもう一点お願いいたします。 Action側で使用したい場合 if((this.rList) == null){ System.out.println("null"); }else{ System.out.println("Notnull"); } のような仕様方法でよろしいのでしょうか？上記の方法でやるとunllが返って着てしまうのですが...

A-pZ

2016/07/08 08:35

<s:submit>が<form>の中にないためrListの中身が送信されていないのではないでしょうか。また<form>でStruts2用のタグを用いているわけではないようなので、送信ボタンも <input type="submit" value="送信" /> などで問題ありません。

settyan

2016/07/08 09:00

上記の <form name="recipientList" action="" > <select id="rList" name="rList" multiple style="width: 140px;" size="10" > </select> 内に <form name="recipientList" action="" > 　<select id="rList" name="rList" multiple style="width: 140px;" size="10" >　　　</select> 　<input type="submit" value="送信" /> </form> の様に入れてやってみましたがNullが返ってきてしまいました。

A-pZ

2016/07/08 10:20

「nullが返ってきてしまう」とありますが、 <select id="rList">の中で、おそらくJavaScriptで<option>を作っているかと思うのですが、その<option>にはvalue属性が設定されていますか。ブラウザのデバッグモード(F12)で確認してください。

settyan

2016/07/11 00:42 編集

返答が遅くなってしまい申し訳ございません。 F12キーを押して確認してみると、 <select id="rList" name="rList" multiple style="width: 140px;" size="10"> <option value="value値">田中太郎</option> </select> のような形で生成されており、設定されている模様なのですが、、、。それと、上記の<form>の中に<submit>を入れるやり方でsubmitするとリストの中身が消えてしまうのですが、何か関係があるのでしょうか？コレはページが書き換わる弊害なのでしょうか？

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