質問編集履歴

4

kousin

2016/07/20 09:04

投稿

settyan
settyan

スコア60

test CHANGED
File without changes
test CHANGED
@@ -146,8 +146,72 @@
146
146
 
147
147
  ###進捗
148
148
 
149
+ 変更依然のソース
150
+
149
151
  ```html
150
152
 
153
+ <script>
154
+
155
+ var yearMonth = {
156
+
157
+ <s:iterator value="yearMonths">
158
+
159
+ '<s:property value="key" />': [
160
+
161
+ <s:iterator value="value">
162
+
163
+ '<s:property />' ,
164
+
165
+ </s:iterator>
166
+
167
+ ] ,
168
+
169
+ </s:iterator>
170
+
171
+ }
172
+
173
+
174
+
175
+
176
+
177
+ function change() {
178
+
179
+ // <select id="select"> を取得
180
+
181
+ var select = document.getElementById('month');
182
+
183
+ // <option> 要素を宣言
184
+
185
+ var option = document.createElement('option');
186
+
187
+
188
+
189
+ option.setAttribute('value', yearMonth[1][1]);
190
+
191
+ option.innerHTML = yearMonth[1][1];
192
+
193
+
194
+
195
+ // 上記で設定した <option value=""></option> を、
196
+
197
+ // <select> 内に追加する
198
+
199
+ select.appendChild(option);
200
+
201
+ }
202
+
203
+ </script>
204
+
205
+
206
+
207
+ ```
208
+
209
+ A-pZさんのものを踏まえたソース
210
+
211
+
212
+
213
+ ```html
214
+
151
215
  <script>
152
216
 
153
217
  var yearMonth = {

3

進捗の更新

2016/07/20 09:04

投稿

settyan
settyan

スコア60

test CHANGED
File without changes
test CHANGED
@@ -148,55 +148,95 @@
148
148
 
149
149
  ```html
150
150
 
151
- <script>
151
+ <script>
152
-
152
+
153
- var yearMonth = {
153
+ var yearMonth = {
154
-
154
+
155
- <s:iterator value="yearMonths">
155
+ <s:iterator value="yearMonths">
156
-
156
+
157
- '<s:property value="key" />': [
157
+ '<s:property value="key" />': [
158
-
158
+
159
- <s:iterator value="value">
159
+ <s:iterator value="value">
160
-
160
+
161
- '<s:property />' ,
161
+ '<s:property />' ,
162
-
162
+
163
- </s:iterator>
163
+ </s:iterator>
164
-
164
+
165
- ] ,
165
+ ] ,
166
-
166
+
167
- </s:iterator>
167
+ </s:iterator>
168
+
169
+ };
170
+
171
+
172
+
173
+ var changeYear = function() {
174
+
175
+ // yearsセレクトボックスで選んだ値を取得
176
+
177
+ var selectedValue = document.getElementById("years").value;
178
+
179
+
180
+
181
+ // 月別セレクトボックスに表示する月一覧を抽出
182
+
183
+ var months = yearMonth[selectedValue];
184
+
185
+
186
+
187
+ // 月のセレクトボックスを洗い替え
188
+
189
+ replaceMonths(months);
190
+
191
+ };
192
+
193
+
194
+
195
+ var replaceMonths = function(months) {
196
+
197
+ // optionを全削除
198
+
199
+ var monthsNode = document.getElementById("months")
200
+
201
+
202
+
203
+ if ( monthsNode !== null ) {
204
+
205
+ for ( i=monthsNode.childNodes.length;i>0;i--) {
206
+
207
+ monthsNode.removeChild(monthsNode.childNodes[i-1]);
208
+
209
+ }
210
+
211
+ }
212
+
213
+
214
+
215
+ // option要素を再作成
216
+
217
+ for ( i=0;i<months.length;i++ ) {
218
+
219
+ var optionNode = document.createElement('option');
220
+
221
+ optionNode.setAttribute('value',months[i]);
222
+
223
+ var text = document.createTextNode(months[i]);
224
+
225
+ optionNode.appendChild(text);
226
+
227
+ monthsNode.appendChild(optionNode);
168
228
 
169
229
  }
170
230
 
171
-
172
-
173
-
174
-
175
- function change() {
176
-
177
- // <select id="select"> を取得
178
-
179
- var select = document.getElementById('month');
180
-
181
- // <option> 要素を宣言
182
-
183
- var option = document.createElement('option');
184
-
185
-
186
-
187
- option.setAttribute('value', yearMonth[1][1]);
188
-
189
- option.innerHTML = yearMonth[1][1];
190
-
191
-
192
-
193
- // 上記で設定した <option value=""></option> を、
194
-
195
- // <select> 内に追加する
196
-
197
- select.appendChild(option);
198
-
199
- }
231
+ };
232
+
233
+
234
+
235
+ window.onload = function() {
236
+
237
+ changeYear();
238
+
239
+ };
200
240
 
201
241
  </script>
202
242
 
@@ -208,15 +248,15 @@
208
248
 
209
249
  <div class="ib-box">
210
250
 
211
- <s:select name="years" list="years" onchange="change()" > </s:select>
251
+ <s:select name="years" list="years" onchange="changeYear()" > </s:select>
212
252
 
213
253
  </div>
214
254
 
215
-
216
-
255
+
256
+
217
- <div class="ib-box">
257
+ <div class="ib-box">
218
-
258
+
219
- <select name="month" id="month"> </select>
259
+ <select name="yearMonth" id="month"> </select>
220
260
 
221
261
  </div>
222
262
 
@@ -224,10 +264,6 @@
224
264
 
225
265
  ```
226
266
 
227
- 一応上記のような形で作っては見たものの、理想の動きは得られませんでした...。
228
-
229
- yearMonth[1][1]のところを’aaaa’に変えると変えると動くのですがね(当たり前ですが...)
230
-
231
267
 
232
268
 
233
269
  ![イメージ説明](efdc8e8f2b09781764dfc42d093784c8.png)

2

エラーの更新

2016/07/20 08:28

投稿

settyan
settyan

スコア60

test CHANGED
File without changes
test CHANGED
@@ -227,3 +227,9 @@
227
227
  一応上記のような形で作っては見たものの、理想の動きは得られませんでした...。
228
228
 
229
229
  yearMonth[1][1]のところを’aaaa’に変えると変えると動くのですがね(当たり前ですが...)
230
+
231
+
232
+
233
+ ![イメージ説明](efdc8e8f2b09781764dfc42d093784c8.png)
234
+
235
+ 症状としては上記の画像のように右側のリストの中身が何もないような状態になってしまっています。

1

進捗の更新

2016/07/20 07:21

投稿

settyan
settyan

スコア60

test CHANGED
File without changes
test CHANGED
@@ -143,3 +143,87 @@
143
143
 
144
144
 
145
145
  どなたかお力添えをいただければ幸いに思います。
146
+
147
+ ###進捗
148
+
149
+ ```html
150
+
151
+ <script>
152
+
153
+ var yearMonth = {
154
+
155
+ <s:iterator value="yearMonths">
156
+
157
+ '<s:property value="key" />': [
158
+
159
+ <s:iterator value="value">
160
+
161
+ '<s:property />' ,
162
+
163
+ </s:iterator>
164
+
165
+ ] ,
166
+
167
+ </s:iterator>
168
+
169
+ }
170
+
171
+
172
+
173
+
174
+
175
+ function change() {
176
+
177
+ // <select id="select"> を取得
178
+
179
+ var select = document.getElementById('month');
180
+
181
+ // <option> 要素を宣言
182
+
183
+ var option = document.createElement('option');
184
+
185
+
186
+
187
+ option.setAttribute('value', yearMonth[1][1]);
188
+
189
+ option.innerHTML = yearMonth[1][1];
190
+
191
+
192
+
193
+ // 上記で設定した <option value=""></option> を、
194
+
195
+ // <select> 内に追加する
196
+
197
+ select.appendChild(option);
198
+
199
+ }
200
+
201
+ </script>
202
+
203
+
204
+
205
+
206
+
207
+
208
+
209
+ <div class="ib-box">
210
+
211
+ <s:select name="years" list="years" onchange="change()" > </s:select>
212
+
213
+ </div>
214
+
215
+
216
+
217
+ <div class="ib-box">
218
+
219
+ <select name="month" id="month"> </select>
220
+
221
+ </div>
222
+
223
+
224
+
225
+ ```
226
+
227
+ 一応上記のような形で作っては見たものの、理想の動きは得られませんでした...。
228
+
229
+ yearMonth[1][1]のところを’aaaa’に変えると変えると動くのですがね(当たり前ですが...)