teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問選択した値によって選択肢を変更させたい。

編集履歴

質問編集履歴

2

書式の改善

2020/11/19 15:09

投稿

_nussy_
_nussy_

スコア5

test CHANGED
@@ -1 +1 @@
1
- プルダウンで、選択された値によって以降の選択肢を変更させたい。
1
+ 選択した値によって選択肢を変更させたい。
test CHANGED
@@ -4,14 +4,36 @@
4
4
 
5
5
  個人でアプリケーションの作成を行っています。
6
6
 
7
- 困っているので、教えていただけると幸いです。
8
-
9
-
10
-
11
7
  JavaScript初学者で拙い文章・コードですが、よろしくお願いします。
12
8
 
13
9
 
14
10
 
11
+
12
+
13
+ （例）
14
+
15
+ 　「肉」を選択した場合、
16
+
17
+ 　　＝＞　選択肢は「豚肉」「牛肉」「羊肉」の3つ
18
+
19
+ 　「魚」を選択した場合、
20
+
21
+ 　　＝＞　選択肢は、「マグロ」「ハマチ」「アジ」の3つ
22
+
23
+
24
+
25
+ 　上記のように、始めの選択肢次第で以降の選択肢の内容が異なる挙動を目指しています。
26
+
27
+
28
+
29
+ 　どのような手段を用いればプルダウン内の選択肢は制限できるのでしょうか？
30
+
31
+ 　困っているので、教えていただけると幸いです、些細なヒントでもありがたいです。
32
+
33
+
34
+
35
+
36
+
15
37
  【実現したいこと】
16
38
 
17
39
  プルダウンで、選択された値によって以降の選択肢を変更させたい。
@@ -26,11 +48,7 @@
26
48
 
27
49
  ```
28
50
 
29
- エラーメッセージ：特にありません。
30
-
31
- 問題：プルダウンで、選択された値によって以降の選択肢を変更させることが出来ません。
32
-
33
- food_id内の選択肢の減らし方が分かりません。
51
+ 選択肢の変更方法が分かりません。
34
52
 
35
53
  ```
36
54
 
@@ -114,7 +132,7 @@
114
132
 
115
133
  }
116
134
 
117
-
135
+ });
118
136
 
119
137
  const itemCategoryValue = itemCategory.value
120
138
 
@@ -124,21 +142,25 @@
124
142
 
125
143
  //カテゴリーで肉を選択した際には、「豚肉」「牛肉」しか選択肢にないようにする
126
144
 
127
- console.log(itemCategoryValue) =>カテゴリーIDの取得済
145
+ //console.log(itemCategoryValue) =>カテゴリーIDの取得済
128
146
 
129
147
 
130
148
 
149
+ //foodの入力フォームをクリックした際の処理＋カテゴリーで「肉」を選択した際の処理
150
+
151
+ itemFood.addEventListener('click', function(){
152
+
131
- if (itemCategoryValue == 2) {　=>カテゴリーID別の条件式の定義
153
+ if (itemCategory.value == 2) {
132
-
154
+
133
- console.log("○")
155
+ console.log(itemF);　＝＞nodeListで取得する
156
+
134
-
157
+ 　　　console.log(itemFood);　＝＞全てのselect要素取得する　
158
+
135
- } else {
159
+ } else {
136
-
160
+
137
- console.log("×");
161
+ console.log("×");
138
-
162
+
139
- }
163
+ }
140
-
141
- });
142
164
 
143
165
  });
144
166
 
@@ -170,40 +192,24 @@
170
192
 
171
193
 
172
194
 
173
- 必要なデータの取得を行いました。
195
+ nodeListについて、勉強しました。
196
+
174
-
197
+ https://developer.mozilla.org/ja/docs/Web/API/NodeList
175
-
176
-
198
+
199
+
200
+
201
+
202
+
177
- まずは、入力されたカテゴリーIDを取得することが出来ました。
203
+ 今回は、nodeListで取得した後に、配列に置き換えて
178
-
179
- 次に、カテゴリーごとに設ける条件式も、入力されたカテゴリーID別に処理が行えています。
204
+
180
-
181
- カテゴリーで「肉」を選んだ場合、「○」、魚を選んだ場合、「×」と出力できています。
182
-
183
-
184
-
185
-
186
-
187
- 問題はここからで、
188
-
189
-
190
-
191
- ifの条件式の中で、food_id内の選択肢の減らし方が分からずに困っています。
192
-
193
- そもそも選択肢をなくすのに、何を用いればいいのか考えています。
205
+ foreach（）メソッドを用いて反復させるのがいいのかなと読んでみて思いました。
194
-
206
+
207
+
208
+
195
- （選択肢させたくない要素1つずつに"style", "display:none;"とかで非表示にするのはどうだろうか、、と）
209
+ しかしながら、反復したとしても何をすれば、選択肢から外すにはselect要素に
210
+
196
-
211
+ 何を定義すればいいのか分かりません。
197
-
198
-
212
+
213
+
214
+
199
- アドバイスなどをいただけると助かります。よろしくお願いします。
215
+ 些細なヒントでもいただけると幸いです。
200
-
201
-
202
-
203
- ### 補足情報（FW/ツールのバージョンなど）
204
-
205
- ruby '2.6.5'
206
-
207
-
208
-
209
- ここにより詳細な情報を記載してください。

1

誤字

2020/11/19 15:09

投稿

_nussy_
_nussy_

スコア5

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,8 @@
30
30
 
31
31
  問題：プルダウンで、選択された値によって以降の選択肢を変更させることが出来ません。
32
32
 
33
+ food_id内の選択肢の減らし方が分かりません。
34
+
33
35
  ```
34
36
 
35
37
 
@@ -122,24 +124,26 @@
122
124
 
123
125
  //カテゴリーで肉を選択した際には、「豚肉」「牛肉」しか選択肢にないようにする
124
126
 
127
+ console.log(itemCategoryValue) =>カテゴリーIDの取得済
128
+
129
+
130
+
125
- if (itemCategoryValue== 2) {
131
+ if (itemCategoryValue == 2) {　=>カテゴリーID別の条件式の定義
126
-
132
+
127
- itemFoodValue.each(function(i) {
133
+ console.log("○")
128
-
134
+
129
- if (i > 3) {
135
+ } else {
130
-
136
+
131
- itemFood.removeAttribute("style", "display:none;");
137
+ console.log("×");
132
-
138
+
133
- }
139
+ }
134
-
140
+
135
- });
141
+ });
136
-
137
- };
138
-
139
- });
140
142
 
141
143
  });
142
144
 
145
+ });
146
+
143
147
  ```
144
148
 
145
149
 
@@ -166,45 +170,31 @@
166
170
 
167
171
 
168
172
 
169
- console.log(itemFood)
170
-
171
- => select要素全体が取得できたので、eachを用いて1つずつ条件式に当てはめようとしました。
172
-
173
- 　1つずつの値を「i」として、food_idのvalueがマグロ以降は非表示にするコードを書いてみました。
174
-
175
- 　しかしながら、selecte要素を取得しただけ今後の記述方法が分かりません。
176
-
177
-
178
-
179
- MDN：https://developer.mozilla.org/ja/docs/Web/API/NodeList
180
-
181
-
182
-
183
- 要素を取得しているだけで、配列ではないので処理ができない状態かと思います。
184
-
185
-
186
-
187
- 処理のイメージとして、
173
+ 必要なデータの取得を行いました。
188
-
174
+
175
+
176
+
189
- 　処理1：入力されたカテゴリーIDを取得。
177
+ まずは、入力されたカテゴリーIDを取得することが出来ました。
190
-
178
+
191
- 　処理2：取得したカテゴリーIDを元に、条件式を作成。
179
+ 次に、カテゴリーごとに設ける条件式も、入力されたカテゴリーID別に処理が行えています。
180
+
192
-
181
+ カテゴリーで「肉」を選んだ場合、「○」、魚を選んだ場合、「×」と出力できています。
182
+
183
+
184
+
185
+
186
+
187
+ 問題はここからで、
188
+
189
+
190
+
193
- 　処理3：food_idを処理2で定義した条件式に1つずつ当てていく。
191
+ ifの条件式の中で、food_id内の選択肢の減らし方が分からずに困っています。
194
-
195
- 　処理4：条件式から外れた場合、次の条件式へ、、、
192
+
196
-
197
-
198
-
199
- という形にしたいと思っています。
200
-
201
- MDNなどを拝見しましたが、思うような挙動のコードが書けませんでした。
193
+ そもそも選択肢をなくすのに、何を用いればいいのか考えています。
202
-
203
-
204
-
205
-
206
-
194
+
207
- そもそも選択肢をなくすのに、"style", "display:none;"を定義すればいいのでしょうか？
195
+ （選択肢させたくない要素1つずつに"style", "display:none;"とかで非表示にするのはどうだろうか、、と）
196
+
197
+
208
198
 
209
199
  アドバイスなどをいただけると助かります。よろしくお願いします。
210
200