teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問addEventListener内でif文は使用できないでしょうか。

編集履歴

質問編集履歴

2

10回繰り返すのを２回にしましたが、文中の「１０」が訂正できていなかったので「２」に変更しました。

2021/07/10 13:27

投稿

TakuTakahashi
TakuTakahashi

スコア10

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- AのプルダウンメニューにAddEventListnerをつけてAをselectedで判定し、B,Cで使えないoptionにdisabledを付け、10回for文で繰り返そうとしています。ところが、addEventListner内でAのselectedが１の場合、２の場合、とif文を書くと、最初の文だけしか効かず、２つ目以降のelse ifが反応してくれません。１つ目を選択した後は、B,Cが固定されてしまいます。２つ目を選択してもB,Cは１つ目の条件になってしまいます。
9
+ AのプルダウンメニューにAddEventListnerをつけてAをselectedで判定し、B,Cで使えないoptionにdisabledを付け、2回for文で繰り返そうとしています。ところが、addEventListner内でAのselectedが１の場合、２の場合、とif文を書くと、最初の文だけしか効かず、２つ目以降のelse ifが反応してくれません。１つ目を選択した後は、B,Cが固定されてしまいます。２つ目を選択してもB,Cは１つ目の条件になってしまいます。
10
10
 
11
11
  ### 該当のソースコード
12
12
 

1

ご指摘いただきありがとうございます。HTMLを追加しました。それに伴い最初３０回繰り返す、としていましたが２回に変更、B,Cの選択可能なoption番号も変更しました。

2021/07/10 13:27

投稿

TakuTakahashi
TakuTakahashi

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- A,B,C３つのプルダウンメニューをグループにして、１ページに１０グループ繰り返します。
3
+ A,B,C３つのプルダウンメニューをグループにして、１ページに２グループ繰り返します。
4
4
 
5
5
  A,B,Cはすでに選択肢が決まっていて、Aで選択したものに対してB,Cで選択できる要素が絞り込まれます。
6
6
 
@@ -14,82 +14,206 @@
14
14
 
15
15
  ```javascript
16
16
 
17
- //プルダウンメニュー３０個を格納
18
-
19
- const selItem=document.querySelectorAll("select");
17
+ const selItem = document.querySelectorAll("select");
20
-
21
- //Bのプルダウンメニューを最初disabledに
18
+
22
-
23
- for(let i=1;i<30;i+=3){
19
+ for (let i = 1; i < 6; i += 3) {
24
-
20
+
25
- selItem[i].setAttribute("disabled",true);
21
+ selItem[i].setAttribute("disabled", true);
26
22
 
27
23
  }
28
24
 
29
- //Cのプルダウンメニューを最初disabledに
30
-
31
- for(let j=2;j<30;j+=3){
25
+ for (let j = 2; j < 6; j += 3) {
32
-
26
+
33
- selItem[j].setAttribute("disabled",true);
27
+ selItem[j].setAttribute("disabled", true);
34
28
 
35
29
  }
36
30
 
37
- //Aのプルダウン10個に対してaddEventListenerをつける
38
-
39
- for(let k=0;k<30;k+=3){
40
-
41
- selItem[k].addEventListener("click",function(evt){
42
-
43
- //同じグループのAが選択されたらB,Cのdisabledを外す
44
-
45
- selItem[k+1].disabled=false;
46
-
47
- selItem[k+2].disabled=false;
48
-
49
- //Aが変更された場合はB,Cの選択可能オプションが変わるのでB,Cは選択を初期化する
50
-
51
- selItem[k+1].selectedIndex=0;
52
-
53
- selItem[k+2].selectedIndex=0;
54
-
55
- //Aのoption１つ目
56
-
57
- if(selItem[k].value="1"){
58
-
59
- //Bの制限。Aのvalueが１の場合Bは1,2番目のみ選択可能
60
-
61
- selItem[k+1].options[2].setAttribute("disabled",true);
62
-
63
- selItem[k+1].options[3].setAttribute("disabled",true);
64
-
65
- //Cの制限。Aのvalueが１の場合Cは1,2番目のみ選択可能
66
-
67
- for(let c=2;c<13;c++){
68
-
69
- selItem[k+2].options[c].setAttribute("disabled",true);
70
-
71
- }}
72
-
73
-
74
-
75
- //Aのoption２つ目
76
-
77
- else if(selItem[k].value="2"){
78
-
79
- //Bの制限。Aのvalueが1の場合Bは1,2,3番目のみ選択可能
80
-
81
- selItem[k+1].options[3].setAttribute("disabled",true);
82
-
83
- //Cの制限。Aのvalueが2の場合Cは10番目のみ選択可能
84
-
85
- selItem[k+2].selectIndex=9;
86
-
87
- evt.stopPropagation(); // イベントの伝播を止める
88
-
89
- }});}
31
+
32
+
33
+ for (let k = 0; k < 6; k += 3) {
34
+
35
+ selItem[k].addEventListener("click", function(evt) {
36
+
37
+ //同じグループのAが選択されたらB,Cのdisabledを外す
38
+
39
+ selItem[k + 1].disabled = false;
40
+
41
+ selItem[k + 2].disabled = false;
42
+
43
+ //Aが変更された場合はB,Cの選択可能オプションが変わるのでB,Cは選択を初期化する
44
+
45
+ selItem[k + 1].selectedIndex = 0;
46
+
47
+ selItem[k + 2].selectedIndex = 0;
48
+
49
+ //Aのoption１つ目
50
+
51
+ if (selItem[k].value == "1") {
52
+
53
+ //Bの制限。Aのvalueが１の場合Bは1,2番目のみ選択可能
54
+
55
+ selItem[k + 1].options[3].setAttribute("disabled", true);
56
+
57
+ selItem[k + 1].options[4].setAttribute("disabled", true);
58
+
59
+ //Cの制限。Aのvalueが１の場合Cは1から6番目のみ選択可能
60
+
61
+ for (let c = 7; c < 12; c++) {
62
+
63
+ selItem[k + 2].options[c].setAttribute("disabled", true);
64
+
65
+ }
66
+
67
+ }
68
+
69
+
70
+
71
+ //Aのoption２つ目
72
+
73
+ else if (selItem[k].value == "2") {
74
+
75
+ //Bの制限。Aのvalueが2の場合Bは1,2,3番目のみ選択可能
76
+
77
+ 　selItem[k + 1].options[4].setAttribute("disabled",true);
78
+
79
+ //Cの制限。Aのvalueが2の場合Cは4から11番目のみ選択可能
80
+
81
+ for (let c = 1; c < 12; c++) {
82
+
83
+ selItem[k + 2].options[c].setAttribute("disabled", true);
84
+
85
+ }
86
+
87
+ evt.stopPropagation(); // イベントの伝播を止める
88
+
89
+ }
90
+
91
+ });
92
+
93
+ }
90
94
 
91
95
  ```
92
96
 
97
+ ```HTML
98
+
99
+ //A-1
100
+
101
+ <select>
102
+
103
+ <option value="" selected="selected">選択 ...</option>
104
+
105
+ <option value="1">11日</option>
106
+
107
+ <option value="2">12日</option>
108
+
109
+ </select>
110
+
111
+ //B-1
112
+
113
+ <select>
114
+
115
+ <option value="" selected="selected">選択 ...</option>
116
+
117
+ <option value="1">田中</option>
118
+
119
+ <option value="2">佐藤</option>
120
+
121
+ <option value="3">藤井</option>
122
+
123
+ <option value="4">伊藤</option>
124
+
125
+ </select>
126
+
127
+ //C-1
128
+
129
+ <select>
130
+
131
+ <option value="" selected="selected">選択 ...</option>
132
+
133
+ <option value="1">9時</option>
134
+
135
+ <option value="2">10時</option>
136
+
137
+ <option value="3">11時</option>
138
+
139
+ <option value="4">12時</option>
140
+
141
+ <option value="5">13時</option>
142
+
143
+ <option value="6">14時</option>
144
+
145
+ <option value="7">15時</option>
146
+
147
+ <option value="8">16時</option>
148
+
149
+ <option value="9">9時〜12時の間</option>
150
+
151
+ <option value="10">13時〜15時の間</option>
152
+
153
+ <option value="11">13時〜15時の間</option>
154
+
155
+ </select>
156
+
157
+ //A-2
158
+
159
+ <select>
160
+
161
+ <option value="" selected="selected">選択 ...</option>
162
+
163
+ <option value="1">理系</option>
164
+
165
+ <option value="2">文系</option>
166
+
167
+ </select>
168
+
169
+ //B-2
170
+
171
+ <select>
172
+
173
+ <option value="" selected="selected">選択 ...</option>
174
+
175
+ <option value="1">田中</option>
176
+
177
+ <option value="2">佐藤</option>
178
+
179
+ <option value="3">藤井</option>
180
+
181
+ <option value="4">伊藤</option>
182
+
183
+ </select>
184
+
185
+ //C-2
186
+
187
+ <select>
188
+
189
+ <option value="" selected="selected">選択 ...</option>
190
+
191
+ <option value="1">9時</option>
192
+
193
+ <option value="2">10時</option>
194
+
195
+ <option value="3">11時</option>
196
+
197
+ <option value="4">12時</option>
198
+
199
+ <option value="5">13時</option>
200
+
201
+ <option value="6">14時</option>
202
+
203
+ <option value="7">15時</option>
204
+
205
+ <option value="8">16時</option>
206
+
207
+ <option value="9">9時〜12時の間</option>
208
+
209
+ <option value="10">13時〜15時の間</option>
210
+
211
+ <option value="11">13時〜15時の間</option>
212
+
213
+ </select>
214
+
215
+ ```
216
+
93
217
 
94
218
 
95
219
  ### 試したこと