回答編集履歴

1

追記

2017/12/20 11:11

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -37,3 +37,179 @@
37
37
 
38
38
 
39
39
  ```
40
+
41
+
42
+
43
+ # 追記
44
+
45
+
46
+
47
+ ```javascript
48
+
49
+ window.addEventListener('DOMContentLoaded', function(){
50
+
51
+ func1();
52
+
53
+ });
54
+
55
+ document.addEventListener('change',function(e){
56
+
57
+ var t=e.target;
58
+
59
+ if(t.nodeName=="SELECT" || t.nodeName=="INPUT" && t.type=="radio"){
60
+
61
+ func1();
62
+
63
+ }
64
+
65
+ });
66
+
67
+ function func1(){
68
+
69
+ var v1=document.querySelector('#changeSelect').value;
70
+
71
+ var v2=document.querySelector('[name=entryPlan]:checked').value;
72
+
73
+ var v3=document.querySelector('[name=entryPlan2]:checked').value;
74
+
75
+ var s1=document.querySelector('#apple-select').style;
76
+
77
+ var s2=document.querySelector('#fuji').style;
78
+
79
+ var s3=document.querySelector('#tsugaru').style;
80
+
81
+ var s4=document.querySelector('#peach-select').style;
82
+
83
+ var s5=document.querySelector('#outou').style;
84
+
85
+ var s6=document.querySelector('#hakutou').style;
86
+
87
+
88
+
89
+ s1.display="none";
90
+
91
+ s2.display="none";
92
+
93
+ s3.display="none";
94
+
95
+ s4.display="none";
96
+
97
+ s5.display="none";
98
+
99
+ s6.display="none";
100
+
101
+ switch(v1){
102
+
103
+ case "apple":
104
+
105
+ s1.display="";
106
+
107
+ if(v2=="hoge1") s2.display="";
108
+
109
+ if(v2=="hoge2") s3.display="";
110
+
111
+ break;
112
+
113
+ case "peach":
114
+
115
+ s4.display="";
116
+
117
+ if(v3=="hoge1") s5.display="";
118
+
119
+ if(v3=="hoge2") s6.display="";
120
+
121
+ break;
122
+
123
+
124
+
125
+ }
126
+
127
+ }
128
+
129
+ ```
130
+
131
+ ```HTML
132
+
133
+ <table>
134
+
135
+ <tr>
136
+
137
+ <th>くだもの</th>
138
+
139
+ <td>
140
+
141
+ <select id="changeSelect" name="hoge">
142
+
143
+ <option value="">選択してください</option>
144
+
145
+ <option value="apple">りんご</option>
146
+
147
+ <option value="peach">もも</option>
148
+
149
+ </select>
150
+
151
+ </td>
152
+
153
+ </tr>
154
+
155
+ <tr id="apple-select">
156
+
157
+ <th>りんごの種類</th>
158
+
159
+ <td>
160
+
161
+ <label><input type="radio" name="entryPlan" value="hoge1" checked>ふじ</label>
162
+
163
+ <label><input type="radio" name="entryPlan" value="hoge2">つがる</label>
164
+
165
+ </td>
166
+
167
+ </tr>
168
+
169
+ <tr id="fuji">
170
+
171
+ <th>ふじの個数</th>
172
+
173
+ <td><input type="text"></td>
174
+
175
+ </tr>
176
+
177
+ <tr id="tsugaru">
178
+
179
+ <th>つがるの個数</th>
180
+
181
+ <td><input type="text"></td>
182
+
183
+ </tr>
184
+
185
+ <tr id="peach-select">
186
+
187
+ <th>ももの種類</th>
188
+
189
+ <td>
190
+
191
+ <label><input type="radio" name="entryPlan2" value="hoge1" checked>黄桃</label>
192
+
193
+ <label><input type="radio" name="entryPlan2" value="hoge2">白桃</label></td>
194
+
195
+ </tr>
196
+
197
+ <tr id="outou">
198
+
199
+ <th>黄桃の個数</th>
200
+
201
+ <td><input type="text"></td>
202
+
203
+ </tr>
204
+
205
+ <tr id="hakutou">
206
+
207
+ <th>白桃の個数</th>
208
+
209
+ <td><input type="text"></td>
210
+
211
+ </tr>
212
+
213
+ </table>
214
+
215
+ ```