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

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

ただいまの
回答率

90.48%

  • JavaScript

    20863questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    16120questions

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

  • HTML

    11803questions

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

  • JSP

    1047questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Struts 2

    147questions

    Apache Struts 2は、Apache Strutsプロジェクトにて開発されているオープンソースのJavaベースのWebアプリケーションフレームワークです。Sturts1に比べ、設定ファイルの削減、依存性の注入、POJO等の改善がなされています。

javaで作成したHashMap(List)をstruts2でjspに渡しjavascriptを使い動的にselectボックスを作成したい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,654

settyan

score 40

以前にも同じような質問をさせていただいたのですが、もっと詳しく内容を書くために再掲載させていただきます。よろしくお願いいたします。

本文に入らせていただきます。

タイトルのようなことをやりたい。

タイトルで意味が通じますかね?
母国語すら危ういのにもっぱら英語のプログラマを選ぶなんて狂気の沙汰ですよね。

まあそんなどーでもいいことは置いといて詳しい説明に入ります。

やりたいことはhttp://www.pori2.net/js/form/5.htmlこのサイト様のようなことをやりたいんです

詳しい仕様

コード内にあるので言っちゃいますが渡したいのは年月リストなのです。
コレが固定値で2016-01から2017-12までのような感じならものすごく楽なんですが、始まりがわからなければ終わりもわからないので固定値化することができないいんです。

たとえば2016-05始まりの2017-08終わりなので左のタブで2016を選ぶと「5,6,7,8,9,10,11,12」が表示され2016を選ぶと「1,2,3,4,5,6,7,8」が表示されるみたいなものを作りたいんです。

問題点となっているのが3つ
1.このサイト様ではリストの長さが固定だけど、私がやろうとしていることはリストの長さが決まっていない(厳密に言うと最大で12の長さがあればいいんだけど、長さが1のリストのために12で生成しとくのは抵抗があるし、、)
2.このサイト様ではjavaScriptに配列ベタ書きだけど私は上にも書いた通りjava側からstruts2を経由させてもってこなきゃならない...
3.jspに渡したはいいがどうやってjavascriptでいじるんだ?

という点です。

で以前の質問の回答者様方から得た99%知識ともともと持っていたかも怪しい1%の知識を総動員させた結果こうなりました

//ハッシュマップを生成
HashMap<String, String> monthMap = new HashMap<String, String>();
//マップを生成
Map<Integer, List<Integer>> ymmap = new HashMap<Integer, List<Integer>>();

public String execute() throws Exception {

        monthMap.put("1", "2016");
        monthMap.put("2", "2017");
        monthMap.put("3", "2018");

        ymmap.put(2015, new ArrayList<Integer>());
        ymmap.get(2015).add(9);
        ymmap.get(2015).add(10);
        ymmap.get(2015).add(11);
        ymmap.get(2015).add(12);
        ymmap.put(2016, new ArrayList<Integer>());
        ymmap.get(2016).add(1);
        ymmap.get(2016).add(2);
        ymmap.get(2016).add(3);
        ymmap.get(2016).add(4);
}

//jsp側へ受け渡しの準備
public HashMap<String, String>  getMonthMap() {return monthMap;}
public void setMonthMap(HashMap<String, String> map) { this.monthMap = map;}
public Map<Integer, List<Integer>> getYmmap() {return ymmap;}
public void setYmmap(Map<Integer, List<Integer>> map) { this.ymmap = map;}
<div class="ib-box">
    <s:select  list="monthMap" id="Year" onchange="changeMonth"></s:select>
</div>

<div class="ib-box">
    <select id="Month"  ></select>
</div>
//まだ書いてないです


「monthMapで選ばれたkeyで右側の配列を変えればいいんじゃね?簡単ww」と思っていたのですが、「javascriptからどーやって、monthMapのKeyに応じた配列もってくんねん。無理やんこれ」となりました。

どなたかお力添えをいただければ幸いに思います。

進捗

変更依然のソース

<script>
                    var yearMonth = {
                          <s:iterator value="yearMonths">
                            '<s:property value="key" />': [
                              <s:iterator value="value">
                                '<s:property />' ,
                              </s:iterator>
                            ] ,
                          </s:iterator>
                    }


                    function change() {
                        // <select id="select"> を取得
                        var select = document.getElementById('month');
                        // <option> 要素を宣言
                        var option = document.createElement('option');

                        option.setAttribute('value', yearMonth[1][1]);
                        option.innerHTML = yearMonth[1][1];

                        // 上記で設定した <option value=""></option> を、
                        // <select> 内に追加する
                        select.appendChild(option);
                    }
                </script>


A-pZさんのものを踏まえたソース

<script>
    var yearMonth = {
      <s:iterator value="yearMonths">
        '<s:property value="key" />': [
           <s:iterator value="value">
             '<s:property />' ,
           </s:iterator>
           ] ,
      </s:iterator>
    };

    var changeYear = function() {
        // yearsセレクトボックスで選んだ値を取得
        var selectedValue = document.getElementById("years").value;

        // 月別セレクトボックスに表示する月一覧を抽出
        var months = yearMonth[selectedValue];

        // 月のセレクトボックスを洗い替え
        replaceMonths(months);
    };

    var replaceMonths = function(months) {
        // optionを全削除
        var monthsNode = document.getElementById("months")

        if ( monthsNode !== null ) {
            for ( i=monthsNode.childNodes.length;i>0;i--) {
                monthsNode.removeChild(monthsNode.childNodes[i-1]);
            }
         }

        // option要素を再作成
        for ( i=0;i<months.length;i++ ) {
            var optionNode = document.createElement('option');
            optionNode.setAttribute('value',months[i]);
            var text = document.createTextNode(months[i]);
            optionNode.appendChild(text);
            monthsNode.appendChild(optionNode);
        }
    };

    window.onload = function() {
            changeYear();
    };
</script>



        <div class="ib-box">
            <s:select name="years" list="years" onchange="changeYear()" > </s:select>
        </div>

                <div class="ib-box">
            <select name="yearMonth" id="month"> </select>
        </div>

イメージ説明
症状としては上記の画像のように右側のリストの中身が何もないような状態になってしまっています。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/07/20 17:52

    回答が付いた質問の編集は慎重に行ってください。

    キャンセル

  • settyan

    2016/07/20 18:01 編集

    申し訳ありませんでした。次回から気をつけます。
    以前のソースも残すようにします。

    キャンセル

回答 2

checkベストアンサー

+2

以下のソースで検証してみました。別に出力には問題はなく、JSPの事前コンパイルエラーについても、一度プロジェクトをクリーンした後にJSPを開きなおすと解決されます。

なお、Struts2.3.29では 多重iteratorに不具合があり、2.3.30で解決済み です。

Actionクラス(一部のフィールド名が実態とあっていないのはこちらで訂正しています)

import com.opensymphony.xwork2.ActionSupport;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;

import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Results({@Result(name = ActionSupport.SUCCESS, location = "map.jsp")})
public class DoubleSelectAction extends ActionSupport {

  private Map<String,String> years;
  private Map<String,List<String>> yearMonths;

  @Action("map")
  public String execute() {
    setYears(new HashMap<>());
    setYearMonths(new HashMap<>());

    years.put("1", "2015");
    years.put("2", "2016");
    years.put("3", "2017");

    yearMonths.put("2015", Arrays.asList("9","10","11","12"));
    yearMonths.put("2016", Arrays.asList("1","2","3","4"));
    yearMonths.put("2017", Arrays.asList("4","5","6","7","8","9","10"));

    return ActionSupport.SUCCESS;
  }

  public Map<String,String> getYears() {
    return years;
  }

  public void setYears(Map<String,String> years) {
    this.years = years;
  }

  public Map<String,List<String>> getYearMonths() {
    return yearMonths;
  }

  public void setYearMonths(Map<String,List<String>> yearMonths) {
    this.yearMonths = yearMonths;
  }
}

map.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
var yearMonth = {
  <s:iterator value="yearMonths">
    '<s:property value="key" />': [
      <s:iterator value="value">
        '<s:property />' ,
      </s:iterator>
    ] ,  
  </s:iterator>
};

var changeYear = function() {
  // yearsセレクトボックスで選んだ値を取得
  var selectedValue = document.getElementById("years").value;

  // 月別セレクトボックスに表示する月一覧を抽出
  var months = yearMonth[selectedValue];

  // 月のセレクトボックスを洗い替え
  replaceMonths(months);
};

var replaceMonths = function(months) {
  // optionを全削除
  var monthsNode = document.getElementById("months")
  if ( monthsNode !== null ) {
    for ( i=monthsNode.childNodes.length;i>0;i--) {
      monthsNode.removeChild(monthsNode.childNodes[i-1]);
    }
  }

  // option要素を再作成
  for ( i=0;i<months.length;i++ ) {
    var optionNode = document.createElement('option');
    optionNode.setAttribute('value',months[i]);
    var text = document.createTextNode(months[i]);
    optionNode.appendChild(text);
    monthsNode.appendChild(optionNode);
  }
};

window.onload = function() {
  changeYear();
};
</script>
</head>
<body>
  <s:iterator value="yearMonths">
    '<s:property value="key" />': [
       <s:iterator value="value" >
        '<s:property />' ,
      </s:iterator>
    ] ,  
  </s:iterator>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/20 13:47

    こんなに詳しくありがとうございます!
    少し自分で解読します!

    キャンセル

  • 2016/07/20 13:59

    少し自分で見て見たんですがコレだと表示で止まってしまいますよね...
    コレを<select>の中身にしたいのですがどうすればよいのでしょう?
    ご教授いただければ幸いです。

    ソースのほうは問題なく動きました。

    キャンセル

  • 2016/07/20 16:38

    たびたび申し訳ございません。今改めてStruts2のVerを確認したのですがVerが2.3.20(.3)でした。こちらは関係あるのでしょうか?

    キャンセル

  • 2016/07/20 16:49

    2.3.20.3は古いですが、動作はします。

    あとはJavaScriptでの実装ですので、JavaScriptの実装を追加しました。
    Javaの実装と、JavaScriptの実装を混同しないようお気をつけ下さい。

    キャンセル

  • 2016/07/20 17:24

    依然上記のようなselectBoxのままですね...
    それと1つ気になったのですが@Resultの記述がA-pZさんの記してくれたものではなく

    @Results({
    @Result(name = "select", value = "pushSend", type = ActionChainResult.class)
    })
    のような感じなのですが関係はありますか?

    キャンセル

  • 2016/07/20 17:43

    ActionChainResultの場合、別のActionへ遷移してしまうので、Actionクラスのフィールドを引き継いでいないと空になりますが、年のフィールドが表示されているので、月の内容も引き継いでいるのでしょうかね。ActionChain先のActionクラスを確認しましょう。

    キャンセル

  • 2016/07/21 09:41

    動きました!
    Actionとかは関係なく自分のスペルミスでした。
    よく確認もせずに質問ばっかりしてしまい申し訳ございませんでした。
    本当に助かりました。ありがとうございました!

    キャンセル

  • 2016/07/21 11:03

    d(・ω・

    キャンセル

+1

症状としては上記の画像のように右側のリストの中身が何もないような状態になってしまっています。 

function change() {
    /* 略 */
}
change(); // ロード時に1回実行しておく

追記:

いくつかタイプミスなどがあるため、まずそこを修正しないとそもそも動かないのでは。
動くサンプル:https://jsfiddle.net/ccn9u52s/

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/20 17:33

    試してみましたが、以前の状態と変わりませんでした...

    キャンセル

  • 2016/07/21 09:42

    動きました!
    ご指摘の通り自分のスペルミスでした。
    よく確認もせずに質問ばっかりしてしまい申し訳ございませんでした。
    本当に助かりました。ありがとうございました!

    キャンセル

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

  • JavaScript

    20863questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    16120questions

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

  • HTML

    11803questions

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

  • JSP

    1047questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Struts 2

    147questions

    Apache Struts 2は、Apache Strutsプロジェクトにて開発されているオープンソースのJavaベースのWebアプリケーションフレームワークです。Sturts1に比べ、設定ファイルの削減、依存性の注入、POJO等の改善がなされています。

  • トップ
  • Javaに関する質問
  • javaで作成したHashMap(List)をstruts2でjspに渡しjavascriptを使い動的にselectボックスを作成したい。