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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

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

Java

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

Struts 2

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

JavaScript

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

HTML

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

Q&A

解決済

2回答

14337閲覧

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

settyan

総合スコア60

JSP

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

Java

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

Struts 2

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2016/07/20 02:19

編集2016/07/20 09:04

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

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

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

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

やりたいことは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%の知識を総動員させた結果こうなりました

java

1//ハッシュマップを生成 2HashMap<String, String> monthMap = new HashMap<String, String>(); 3//マップを生成 4Map<Integer, List<Integer>> ymmap = new HashMap<Integer, List<Integer>>(); 5 6public String execute() throws Exception { 7 8 monthMap.put("1", "2016"); 9 monthMap.put("2", "2017"); 10 monthMap.put("3", "2018"); 11 12 ymmap.put(2015, new ArrayList<Integer>()); 13 ymmap.get(2015).add(9); 14 ymmap.get(2015).add(10); 15 ymmap.get(2015).add(11); 16 ymmap.get(2015).add(12); 17 ymmap.put(2016, new ArrayList<Integer>()); 18 ymmap.get(2016).add(1); 19 ymmap.get(2016).add(2); 20 ymmap.get(2016).add(3); 21 ymmap.get(2016).add(4); 22} 23 24//jsp側へ受け渡しの準備 25public HashMap<String, String> getMonthMap() {return monthMap;} 26public void setMonthMap(HashMap<String, String> map) { this.monthMap = map;} 27public Map<Integer, List<Integer>> getYmmap() {return ymmap;} 28public void setYmmap(Map<Integer, List<Integer>> map) { this.ymmap = map;}

html

1<div class="ib-box"> 2 <s:select list="monthMap" id="Year" onchange="changeMonth"></s:select> 3</div> 4 5<div class="ib-box"> 6 <select id="Month" ></select> 7</div>

javascript

1//まだ書いてないです

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

どなたかお力添えをいただければ幸いに思います。
###進捗
変更依然のソース

html

1 <script> 2 var yearMonth = { 3 <s:iterator value="yearMonths"> 4 '<s:property value="key" />': [ 5 <s:iterator value="value"> 6 '<s:property />' , 7 </s:iterator> 8 ] , 9 </s:iterator> 10 } 11 12 13 function change() { 14 // <select id="select"> を取得 15 var select = document.getElementById('month'); 16 // <option> 要素を宣言 17 var option = document.createElement('option'); 18 19 option.setAttribute('value', yearMonth[1][1]); 20 option.innerHTML = yearMonth[1][1]; 21 22 // 上記で設定した <option value=""></option> を、 23 // <select> 内に追加する 24 select.appendChild(option); 25 } 26 </script> 27

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

html

1<script> 2 var yearMonth = { 3 <s:iterator value="yearMonths"> 4 '<s:property value="key" />': [ 5 <s:iterator value="value"> 6 '<s:property />' , 7 </s:iterator> 8 ] , 9 </s:iterator> 10 }; 11 12 var changeYear = function() { 13 // yearsセレクトボックスで選んだ値を取得 14 var selectedValue = document.getElementById("years").value; 15 16 // 月別セレクトボックスに表示する月一覧を抽出 17 var months = yearMonth[selectedValue]; 18 19 // 月のセレクトボックスを洗い替え 20 replaceMonths(months); 21 }; 22 23 var replaceMonths = function(months) { 24 // optionを全削除 25 var monthsNode = document.getElementById("months") 26 27 if ( monthsNode !== null ) { 28 for ( i=monthsNode.childNodes.length;i>0;i--) { 29 monthsNode.removeChild(monthsNode.childNodes[i-1]); 30 } 31 } 32 33 // option要素を再作成 34 for ( i=0;i<months.length;i++ ) { 35 var optionNode = document.createElement('option'); 36 optionNode.setAttribute('value',months[i]); 37 var text = document.createTextNode(months[i]); 38 optionNode.appendChild(text); 39 monthsNode.appendChild(optionNode); 40 } 41 }; 42 43 window.onload = function() { 44 changeYear(); 45 }; 46</script> 47 48 49 50 <div class="ib-box"> 51 <s:select name="years" list="years" onchange="changeYear()" > </s:select> 52 </div> 53 54 <div class="ib-box"> 55 <select name="yearMonth" id="month"> </select> 56 </div> 57

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/07/20 08:52

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

2016/07/20 09:02 編集

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

回答2

0

ベストアンサー

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

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

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

java

1import com.opensymphony.xwork2.ActionSupport; 2 3import org.apache.struts2.convention.annotation.Action; 4import org.apache.struts2.convention.annotation.Result; 5import org.apache.struts2.convention.annotation.Results; 6 7import java.util.Arrays; 8import java.util.HashMap; 9import java.util.List; 10import java.util.Map; 11 12@Results({@Result(name = ActionSupport.SUCCESS, location = "map.jsp")}) 13public class DoubleSelectAction extends ActionSupport { 14 15 private Map<String,String> years; 16 private Map<String,List<String>> yearMonths; 17 18 @Action("map") 19 public String execute() { 20 setYears(new HashMap<>()); 21 setYearMonths(new HashMap<>()); 22 23 years.put("1", "2015"); 24 years.put("2", "2016"); 25 years.put("3", "2017"); 26 27 yearMonths.put("2015", Arrays.asList("9","10","11","12")); 28 yearMonths.put("2016", Arrays.asList("1","2","3","4")); 29 yearMonths.put("2017", Arrays.asList("4","5","6","7","8","9","10")); 30 31 return ActionSupport.SUCCESS; 32 } 33 34 public Map<String,String> getYears() { 35 return years; 36 } 37 38 public void setYears(Map<String,String> years) { 39 this.years = years; 40 } 41 42 public Map<String,List<String>> getYearMonths() { 43 return yearMonths; 44 } 45 46 public void setYearMonths(Map<String,List<String>> yearMonths) { 47 this.yearMonths = yearMonths; 48 } 49}

map.jsp

html

1<%@ page contentType="text/html; charset=UTF-8"%> 2<%@ taglib prefix="s" uri="/struts-tags"%> 3<!DOCTYPE> 4<html> 5<head> 6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7<title>Insert title here</title> 8<script> 9var yearMonth = { 10 <s:iterator value="yearMonths"> 11 '<s:property value="key" />': [ 12 <s:iterator value="value"> 13 '<s:property />' , 14 </s:iterator> 15 ] , 16 </s:iterator> 17}; 18 19var changeYear = function() { 20 // yearsセレクトボックスで選んだ値を取得 21 var selectedValue = document.getElementById("years").value; 22 23 // 月別セレクトボックスに表示する月一覧を抽出 24 var months = yearMonth[selectedValue]; 25 26 // 月のセレクトボックスを洗い替え 27 replaceMonths(months); 28}; 29 30var replaceMonths = function(months) { 31 // optionを全削除 32 var monthsNode = document.getElementById("months") 33 if ( monthsNode !== null ) { 34 for ( i=monthsNode.childNodes.length;i>0;i--) { 35 monthsNode.removeChild(monthsNode.childNodes[i-1]); 36 } 37 } 38 39 // option要素を再作成 40 for ( i=0;i<months.length;i++ ) { 41 var optionNode = document.createElement('option'); 42 optionNode.setAttribute('value',months[i]); 43 var text = document.createTextNode(months[i]); 44 optionNode.appendChild(text); 45 monthsNode.appendChild(optionNode); 46 } 47}; 48 49window.onload = function() { 50 changeYear(); 51}; 52</script> 53</head> 54<body> 55 <s:iterator value="yearMonths"> 56 '<s:property value="key" />': [ 57 <s:iterator value="value" > 58 '<s:property />' , 59 </s:iterator> 60 ] , 61 </s:iterator> 62</body> 63</html>

投稿2016/07/20 04:43

編集2016/07/20 07:47
A-pZ

総合スコア12011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

settyan

2016/07/20 04:47

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

2016/07/20 04:59

少し自分で見て見たんですがコレだと表示で止まってしまいますよね... コレを<select>の中身にしたいのですがどうすればよいのでしょう? ご教授いただければ幸いです。 ソースのほうは問題なく動きました。
settyan

2016/07/20 07:38

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

2016/07/20 07:49

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

2016/07/20 08:24

依然上記のようなselectBoxのままですね... それと1つ気になったのですが@Resultの記述がA-pZさんの記してくれたものではなく @Results({ @Result(name = "select", value = "pushSend", type = ActionChainResult.class) }) のような感じなのですが関係はありますか?
A-pZ

2016/07/20 08:43

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

2016/07/21 00:41

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

2016/07/21 02:03

d(・ω・
guest

0

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

JavaScript

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

追記:

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

投稿2016/07/20 08:28

編集2016/07/20 18:40
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

settyan

2016/07/20 08:33

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

2016/07/21 00:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問