以前にも同じような質問をさせていただいたのですが、もっと詳しく内容を書くために再掲載させていただきます。よろしくお願いいたします。
本文に入らせていただきます。
###タイトルのようなことをやりたい。
タイトルで意味が通じますかね?
母国語すら危ういのにもっぱら英語のプログラマを選ぶなんて狂気の沙汰ですよね。
まあそんなどーでもいいことは置いといて詳しい説明に入ります。
やりたいことは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
回答2件
あなたの回答
tips
プレビュー