質問編集履歴

1

コードを簡略化、別の質問を参考にした試作コードを追加

2018/04/19 01:42

投稿

fujii0411
fujii0411

スコア9

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
 
4
4
 
5
+ *4/19 タグなどを修正しました
6
+
5
7
  どうぞよろしくお願いいたします。
6
8
 
7
9
 
@@ -30,13 +32,25 @@
30
32
 
31
33
 
32
34
 
33
- ```Java
35
+ ```
36
+
37
+ <!DOCTYPE HTML>
38
+
39
+ <html>
40
+
41
+ <head>
42
+
43
+ <meta charset="UTF-8">
44
+
45
+ <title></title>
46
+
47
+
34
48
 
35
49
  <script type="text/javascript">
36
50
 
37
51
  window.addEventListener('DOMContentLoaded', function(e){
38
52
 
39
- document.querySelector('[name=hoge]').addEventListener('change',function(e){
53
+ document.querySelector('[name=hoge1]','[name=hoge2]').addEventListener('change',function(e){
40
54
 
41
55
  var t=e.target;
42
56
 
@@ -44,7 +58,7 @@
44
58
 
45
59
  var p=t.parentNode.parentNode.parentNode;
46
60
 
47
- Array.prototype.forEach.call(p.querySelectorAll('tr[id]'),function(x){
61
+ Array.prototype.forEach.call(p.querySelectorAll('li[id]'),function(x){
48
62
 
49
63
  var dsp='';
50
64
 
@@ -64,21 +78,17 @@
64
78
 
65
79
  </script>
66
80
 
67
- ```
81
+
68
-
69
-
70
-
71
- ```HTML
82
+
72
-
73
- <table>
83
+ </head>
74
-
84
+
75
- <tbody>
85
+ <body>
76
-
86
+
87
+
88
+
77
- <tr>
89
+ <div id="box1">
78
-
79
- <td>
90
+
80
-
81
- <select id="changeSelect" name="hoge">
91
+ <select id="changeSelect" name="hoge1">
82
92
 
83
93
  <option value="">選択肢1</option>
84
94
 
@@ -90,31 +100,51 @@
90
100
 
91
101
  </select>
92
102
 
103
+ <ul>
104
+
105
+ <li id="option1-select" style="display:none">「選択肢1」option1の表示内容</li>
106
+
107
+ <li id="option2-select" style="display:none">「選択肢1」option2の表示内容</li>
108
+
109
+ <li id="option3-select" style="display:none">「選択肢1」option3の表示内容</li>
110
+
93
- </td>
111
+ </ul>
112
+
94
-
113
+ </div>
114
+
115
+
116
+
117
+ <div id="box2">
118
+
119
+ <select id="changeSelect" name="hoge2">
120
+
121
+ <option value="">選択肢2</option>
122
+
123
+ <option value="option4">option4</option>
124
+
125
+ <option value="option5">option5</option>
126
+
127
+ <option value="option6">option6</option>
128
+
129
+ </select>
130
+
131
+ <ul>
132
+
133
+ <li id="option4-select" style="display:none">「選択肢2」option4の表示内容</li>
134
+
135
+ <li id="option5-select" style="display:none">「選択肢2」option5の表示内容</li>
136
+
137
+ <li id="option6-select" style="display:none">「選択肢2」option6の表示内容</li>
138
+
95
- </tr>
139
+ </ul>
96
-
97
- <tr id="option1-select" style="display:none">
140
+
98
-
99
- <td>「選択肢1」option1の表示内容</td>
100
-
101
- </tr>
141
+ </div>
102
-
103
- <tr id="option2-select" style="display:none">
142
+
104
-
105
- <td>「選択肢1」option2の表示内容</td>
143
+
106
-
107
- </tr>
144
+
108
-
109
- <tr id="option3-select" style="display:none">
110
-
111
- <td>「選択肢1」option3の表示内容</td>
112
-
113
- </tr>
114
-
115
- </tbody>
145
+ </body>
116
-
146
+
117
- </table>
147
+ </html>
118
148
 
119
149
  ```
120
150
 
@@ -124,149 +154,115 @@
124
154
 
125
155
 
126
156
 
127
- [name=hoge]部分を変更して、Javaに関しては全く詳しくないので
157
+ ご回答を受け、表示箇所idの中身を変更してした
158
+
128
-
159
+ 変わらず2つ目のフォームは動作しません。
160
+
161
+ また前回の質問でベストアンサーに選ばせて頂いたタグを応用できるかと
162
+
163
+ 試してみましたが、動作しませんでした。
164
+
129
- 根本的に間違っいるかと存じます。
165
+ 以下、応用を試しみたコードです。
130
-
131
-
132
-
166
+
167
+
168
+
133
- ```Java
169
+ ```
170
+
171
+ <!DOCTYPE HTML>
172
+
173
+ <html>
174
+
175
+ <head>
176
+
177
+ <meta charset="UTF-8">
178
+
179
+ <title></title>
180
+
181
+
134
182
 
135
183
  <script type="text/javascript">
136
184
 
185
+ HTMLElement.prototype.trigger=function(eventStr){
186
+
187
+ if (document.createEvent) {
188
+
189
+ var e = document.createEvent("HTMLEvents");
190
+
191
+ e.initEvent(eventStr, true, true );
192
+
193
+ return this.dispatchEvent(e);
194
+
195
+ } else {
196
+
197
+ var e = document.createEventObject();
198
+
199
+ return this.fireEvent("on"+eventStr, e);
200
+
201
+ }
202
+
203
+ };
204
+
137
205
  window.addEventListener('DOMContentLoaded', function(e){
138
206
 
139
- document.querySelector('[name=hoge]','[name=hoge2]').addEventListener('change',function(e){
140
-
141
- var t=e.target;
142
-
143
- var v=t.value;
144
-
145
- var p=t.parentNode.parentNode.parentNode;
146
-
147
- Array.prototype.forEach.call(p.querySelectorAll('tr[id]'),function(x){
207
+ Array.prototype.forEach.call(document.querySelectorAll('[data-target]'),function(x){
148
-
149
- var dsp='';
208
+
150
-
151
- if(x.getAttribute('id')!==v+'-select'){
209
+ x.addEventListener('change',function(e){
152
-
210
+
153
- dsp='none';
211
+ Array.prototype.forEach.call(document.querySelectorAll('[name='+e.target.getAttribute("name")+']'),function(y){
212
+
154
-
213
+ document.querySelector('#'+y.getAttribute('data-target')).style.display=(y.checked?"block":"none");
214
+
155
- }
215
+ });
156
-
157
- x.style.display=dsp;
158
216
 
159
217
  });
160
218
 
219
+ x.trigger("change");
220
+
161
221
  });
162
222
 
163
223
  });
164
224
 
165
225
  </script>
166
226
 
167
- ```
227
+
168
-
169
-
170
-
171
- ```HTML
228
+
172
-
173
- <table>
229
+ </head>
174
-
230
+
175
- <tbody>
231
+ <body>
176
-
232
+
233
+
234
+
177
- <tr>
235
+ <div>
178
-
236
+
179
- <td>
237
+ <select>
180
-
181
- <select id="changeSelect" name="hoge">
182
238
 
183
239
  <option value="">選択肢1</option>
184
240
 
185
- <option value="option1">option1</option>
241
+ <option value="option1" name="r1" data-target="box01">option1</option>
186
-
242
+
187
- <option value="option2">option2</option>
243
+ <option value="option2" name="r2" data-target="box02">option2</option>
188
-
244
+
189
- <option value="option3">option3</option>
245
+ <option value="option3" name="r3" data-target="box03">option3</option>
190
246
 
191
247
  </select>
192
248
 
249
+ <ul>
250
+
251
+ <li id="box01">「選択肢1」option1の表示内容</li>
252
+
253
+ <li id="box02">「選択肢1」option2の表示内容</li>
254
+
255
+ <li id="box03">「選択肢1」option3の表示内容</li>
256
+
193
- </td>
257
+ </ul>
194
-
258
+
195
- </tr>
259
+ </div>
196
-
197
- <tr id="option1-select" style="display:none">
260
+
198
-
199
- <td>「選択肢1」option1の表示内容</td>
261
+
200
-
201
- </tr>
262
+
202
-
203
- <tr id="option2-select" style="display:none">
204
-
205
- <td>「選択肢1」option2の表示内容</td>
206
-
207
- </tr>
208
-
209
- <tr id="option3-select" style="display:none">
210
-
211
- <td>「選択肢1」option3の表示内容</td>
212
-
213
- </tr>
214
-
215
- </tbody>
263
+ </body>
216
-
217
- </table>
264
+
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
- <table>
226
-
227
- <tbody>
228
-
229
- <tr>
230
-
231
- <td>
232
-
233
- <select id="changeSelect" name="hoge2">
234
-
235
- <option value="">選択肢2</option>
236
-
237
- <option value="option1">option1</option>
238
-
239
- <option value="option2">option2</option>
240
-
241
- <option value="option3">option3</option>
242
-
243
- </select>
244
-
245
- </td>
265
+ </html>
246
-
247
- </tr>
248
-
249
- <tr id="option1-select" style="display:none">
250
-
251
- <td>「選択肢2」option1の表示内容</td>
252
-
253
- </tr>
254
-
255
- <tr id="option2-select" style="display:none">
256
-
257
- <td>「選択肢2」option2の表示内容</td>
258
-
259
- </tr>
260
-
261
- <tr id="option3-select" style="display:none">
262
-
263
- <td>「選択肢2」option3の表示内容</td>
264
-
265
- </tr>
266
-
267
- </tbody>
268
-
269
- </table>
270
266
 
271
267
  ```
272
268
 
@@ -284,6 +280,4 @@
284
280
 
285
281
 
286
282
 
287
- 初心者のため質問の仕方にも満足でない部分もあるかと存じますが
288
-
289
- どうぞよろしくお願いいたします。
283
+ 引き続き、どうぞよろしくお願いいたします。