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

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

ただいまの
回答率

87.89%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 3,646

score 48

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

やりたいこと

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

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

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

進捗

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

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

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

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

進捗2

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

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

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

疑問点

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

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

現在までの進捗具合

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

<!-- 右側リスト -->
<div class="ib-box" >
    <form name="recipientList" action="" >
        <select id="rList" name="rList" multiple  style="width: 140px;" size="10"  >
    </select>
    </form>
</div>

<!-- 送信ボタン -->
<div class="ib-box" >
    <div class="buttonGroup">
        <s:submit method="debug" value="送信"/>
    </div>
</div>
//選択グループ取得用
private List<String> rList;
public List<String> getrList() {return rList;}
public void setrList(List<String> rList) {this.rList = rList;}

//push照会側の検索ボタンを押した処理
public String debug() throws Exception {
    if(this.rList == null){
            System.out.println("null");
    }else{
            System.out.println("Notnull");
    }
    return "success";
}

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

希望的観測

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

function OnceSelect(){
    var i
      , select1 = document.getElementById( 'Select1' )
      , select2 = document.getElementById( 'Select2' )
      , options = select1.options
      , l = options.length
      , option
      ;
    for ( i = 0; i < l; i++ ) {
        if ( options[ i ].selected === true ) {
            option = document.createElement( 'option' );
            option.innerHTML = options[ i ].text;
            option.setAttribute( 'value', options[ i ].value );
            select2.appendChild( option );
        }
    }
}
<form name="eList" action="">
    <select id="Select1" name="Select1" multiple>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
        <option value="5">E</option>
    </select>
</form>

<input type="button" value="Exec" onclick="OnceSelect();" />

<form name="receptList" action="">
    <select id="Select2" name="Select2" multiple>
    </select>
</form>
select {
    width: 5em;
}

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/08 14:14

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

    キャンセル

+2

  • receptListのリストに追加する件
    ※便宜上、左リスト/右リストと表現します。
    1.右リストの内容をJavaScriptの配列に退避する
    2.左リストで選択されているものを退避配列に追加する
    2.1 ただし、すでにある場合はなにもしない
    3.右リストを空にする
    4.退避配列の内容を右リストに追加する

と、こんな感じでどうでしょうか。
ちなみに、右リストから削除する機能があると嬉しいかもです。

  • サーバーに送る件
    submitのタイミングで、右リストの内容を適当な
    <input type=hidden に設定する。
    カンマ区切りあたりで大丈夫スかね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/08 14:31

    リストボックスに関しては解決いたしました!
    ありがとうございました。

    java側にはリストのまま送れないのですかね。。。?

    キャンセル

  • 2016/07/08 18:35

    もともとリストの中からひとつを選ぶ的なタグですからね。
    サーバー側が受け取れるような(なんらかの)形に
    してやる必要がありますねえ。

    キャンセル

+2

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

public class SelectionAction extends ActionSupport {

    public String execute() throws Exception {
        //....Actionメソッドの実装....
    }

    private List<String> selection;

    public List<String> getSelection() {
        return selection;
    }

    public void setSelection(List<String> selection) {
        this.selection = selection;
    }

}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/08 18: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が返ってきてしまいました。

    キャンセル

  • 2016/07/08 19:20

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

    キャンセル

  • 2016/07/11 09:16 編集

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

    キャンセル

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

  • ただいまの回答率 87.89%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る