質問編集履歴

4

</form>が抜けていたので追加

2021/11/06 09:57

投稿

minari766
minari766

スコア17

test CHANGED
File without changes
test CHANGED
@@ -106,6 +106,8 @@
106
106
 
107
107
  </div>
108
108
 
109
+ </form>
110
+
109
111
  ```
110
112
 
111
113
 

3

HTMLとJavaScripに分けて記載。HTML上のDjango表記をHTMLに変換

2021/11/06 09:57

投稿

minari766
minari766

スコア17

test CHANGED
File without changes
test CHANGED
@@ -54,202 +54,210 @@
54
54
 
55
55
  post_form.html(JavaScript併記)
56
56
 
57
+ ```html
58
+
59
+ <form method="post" enctype="multipart/form-data">
60
+
61
+ <div class="formpost">
62
+
63
+ <div>エリア<span>※必須</span></div>
64
+
65
+ <select name="area" placeholder="選択してください" class="form-control" id="id_area">
66
+
67
+ <option value="1">----選択してください</option>
68
+
69
+ <option value="2">ワールドバザール</option>
70
+
71
+ <option value="3">アドベンチャーランド</option>
72
+
73
+ <option value="4">ウエスタンランド</option>
74
+
75
+ <option value="5">クリッターカントリー</option>
76
+
77
+ <option value="6">ファンタジーランド</option>
78
+
79
+ <option value="7">トゥーンタウン</option>
80
+
81
+ <option value="8">トゥモローランド</option>
82
+
83
+ </select>
84
+
85
+ </div>
86
+
87
+ <div class="formpost">
88
+
89
+ <div>アトラクション<span>※必須</span></div>
90
+
91
+ <select name="attraction" placeholder="選択してください" class="form-control" id="id_attraction">
92
+
93
+ <!-- JavaScriptのattractionElement.children().remove();を消すと下記optionが現れますが、左記を記述するとoptionが全て非表示となります -->
94
+
95
+ <option value="1">----エリアを選択してください</option>
96
+
97
+ <option value="2">オムニバス</option>
98
+
99
+ <!-- 中略 -->
100
+
101
+ <option value="48">モンスターズ・インク“ライド&amp;ゴーシーク!”</option>
102
+
103
+ <option value="49">トゥモローランド(その他)</option>
104
+
105
+ </select>
106
+
107
+ </div>
108
+
109
+ ```
110
+
111
+
112
+
113
+ ```JavaScript
114
+
115
+ <script>
116
+
117
+ const areaElement = $('#id_area');
118
+
119
+ const attractionElement = $('#id_attraction');
120
+
121
+ const area_attraction = {
122
+
123
+        //一部のみ記載
124
+
125
+ '----選択してください': [
126
+
127
+ {
128
+
129
+ 'value': '----エリアを選択してください',
130
+
131
+ 'name': '----エリアを選択してください'
132
+
133
+ },
134
+
135
+ ],
136
+
137
+ 'ワールドバザール': [
138
+
139
+ {
140
+
141
+ 'value': 'オムニバス',
142
+
143
+ 'name': 'オムニバス'
144
+
145
+ },
146
+
147
+ {
148
+
149
+ 'value': 'ペニーアーケード',
150
+
151
+ 'name': 'ペニーアーケード'
152
+
153
+ },
154
+
155
+ {
156
+
157
+ 'value': 'ワールドバザール(その他)',
158
+
159
+ 'name': 'ワールドバザール(その他)'
160
+
161
+ },
162
+
163
+ ],
164
+
165
+ };
166
+
167
+ console.log("area_attraction", area_attraction)
168
+
169
+
170
+
171
+ const changeArea = (select) => {
172
+
173
+ attractionElement.children().remove();
174
+
175
+ const parentId = areaElement.val();
176
+
177
+  console.log("parentId", parentId)
178
+
179
+ const categoryList = area_attraction[parentId];
180
+
181
+  console.log("categoryList", categoryList)
182
+
183
+ for (const category of Object.key(categoryList)) {
184
+
185
+  console.log("category", category)
186
+
187
+ const option = $('<option>');
188
+
189
+ option.val(category['value']);
190
+
191
+ option.text(category['name']);
192
+
193
+ attractionElement.append(option);
194
+
195
+ }
196
+
197
+ if (select !== undefined) {
198
+
199
+ attractionElement.val(select);
200
+
201
+ }
202
+
203
+ };
204
+
205
+
206
+
207
+ $('#id_area').on('change', () => {
208
+
209
+ changeArea();
210
+
211
+ });
212
+
213
+
214
+
215
+ if (areaElement.val()) {
216
+
217
+ const selectedCategory = attractionElement.val();
218
+
219
+ changeArea(selectedCategory);
220
+
221
+ }
222
+
223
+ </script>
224
+
225
+ ```
226
+
227
+
228
+
229
+ forms.py
230
+
57
231
  ```python
58
232
 
59
- {% block content %}
60
-
61
- <form method="post" enctype="multipart/form-data">
62
-
63
- {% csrf_token %}
64
-
65
- <div class="formpost">
66
-
67
- <div>エリア<span>※必須</span></div>
68
-
69
- {% render_field form.area class="form-control" placeholder="選択してください" %}
70
-
71
- </div>
72
-
73
- <div class="formpost">
74
-
75
- <div>アトラクション<span>※必須</span></div>
76
-
77
- {% render_field form.attraction class="form-control" placeholder="選択してください" %}
78
-
79
- {% for field in form %}
80
-
81
- {% for error in field.errors %}
82
-
83
- ※アトラクションを選択してください<br>
84
-
85
- {% endfor %}
86
-
87
- {% endfor %}
88
-
89
- {% for error in form.attraction.non_field_errors %}
90
-
91
- ※{{ error }}
92
-
93
- {% endfor %}
94
-
95
- </div>
96
-
97
- {% endblock %}
98
-
99
-
100
-
101
- {% block extra_js %}
102
-
103
- <script>
104
-
105
- const areaElement = $('#id_area');
106
-
107
- const attractionElement = $('#id_attraction');
108
-
109
- const area_attraction = {
110
-
111
-        //一部のみ記載
112
-
113
- '----選択してください': [
114
-
115
- {
116
-
117
- 'value': '----エリアを選択してください',
118
-
119
- 'name': '----エリアを選択してください'
120
-
121
- },
122
-
123
- ],
124
-
125
- 'ワールドバザール': [
126
-
127
- {
128
-
129
- 'value': 'オムニバス',
130
-
131
- 'name': 'オムニバス'
132
-
133
- },
134
-
135
- {
136
-
137
- 'value': 'ペニーアーケード',
138
-
139
- 'name': 'ペニーアーケード'
140
-
141
- },
142
-
143
- {
144
-
145
- 'value': 'ワールドバザール(その他)',
146
-
147
- 'name': 'ワールドバザール(その他)'
148
-
149
- },
150
-
151
- ],
152
-
153
- ],
154
-
155
- };
156
-
157
- console.log("area_attraction", area_attraction)
158
-
159
-
160
-
161
- const changeArea = (select) => {
162
-
163
- attractionElement.children().remove();
164
-
165
- const parentId = areaElement.val();
166
-
167
-  console.log("parentId", parentId)
168
-
169
- const categoryList = area_attraction[parentId];
170
-
171
-  console.log("categoryList", categoryList)
172
-
173
- for (const category of Object.key(categoryList)) {
174
-
175
-  console.log("category", category)
176
-
177
- const option = $('<option>');
178
-
179
- option.val(category['value']);
180
-
181
- option.text(category['name']);
182
-
183
- attractionElement.append(option);
184
-
185
- }
186
-
187
- if (select !== undefined) {
188
-
189
- attractionElement.val(select);
190
-
191
- }
192
-
193
- };
194
-
195
-
196
-
197
- $('#id_area').on('change', () => {
198
-
199
- changeArea();
200
-
201
- });
202
-
203
-
204
-
205
- if (areaElement.val()) {
206
-
207
- const selectedCategory = attractionElement.val();
208
-
209
- changeArea(selectedCategory);
210
-
211
- }
212
-
213
- </script>
214
-
215
- {% endblock %}
216
-
217
- ```
218
-
219
-
220
-
221
- forms.py
233
+ from .models import Area, Attraction, Category
234
+
235
+
236
+
237
+ class PostForm(forms.Form):
238
+
239
+
240
+
241
+ title = forms.CharField(max_length=50, label='タイトル')
242
+
243
+ area = forms.ModelChoiceField(queryset=Area.objects.all(), label='エリア', widget=forms.Select, initial="----選択してください")
244
+
245
+ attraction = forms.ModelChoiceField(queryset=Attraction.objects.all(), label='アトラクション', widget=forms.Select, initial="----エリアを選択してください")
246
+
247
+ category = forms.ModelChoiceField(queryset=Category.objects.all(), label='カテゴリ', widget=forms.Select, initial="----選択してください")
248
+
249
+ content = forms.CharField(label='内容', widget=forms.Textarea())
250
+
251
+ image = forms.ImageField(label='イメージ画像', required=False)
252
+
253
+ ```
254
+
255
+
256
+
257
+ models.py
222
258
 
223
259
  ```python
224
260
 
225
- from .models import Area, Attraction, Category
226
-
227
-
228
-
229
- class PostForm(forms.Form):
230
-
231
-
232
-
233
- title = forms.CharField(max_length=50, label='タイトル')
234
-
235
- area = forms.ModelChoiceField(queryset=Area.objects.all(), label='エリア', widget=forms.Select, initial="----選択してください")
236
-
237
- attraction = forms.ModelChoiceField(queryset=Attraction.objects.all(), label='アトラクション', widget=forms.Select, initial="----エリアを選択してください")
238
-
239
- category = forms.ModelChoiceField(queryset=Category.objects.all(), label='カテゴリ', widget=forms.Select, initial="----選択してください")
240
-
241
- content = forms.CharField(label='内容', widget=forms.Textarea())
242
-
243
- image = forms.ImageField(label='イメージ画像', required=False)
244
-
245
- ```
246
-
247
-
248
-
249
- models.py
250
-
251
- ```python
252
-
253
261
  class Area(models.Model):
254
262
 
255
263
  name = models.CharField("エリア", max_length=100)

2

説明文を修正

2021/11/06 09:50

投稿

minari766
minari766

スコア17

test CHANGED
@@ -1 +1 @@
1
- Django)プルダウンにて選択肢フィルタリングしたい
1
+ JavaScript)Arrayがundefinedとなるの解消したい
test CHANGED
@@ -6,8 +6,6 @@
6
6
 
7
7
 
8
8
 
9
- 現在のプルダウン画面は以下の通りです。
10
-
11
9
  エリアで"選択肢A"を選んだらアトラクションで"選択肢a〜c"が表示され、
12
10
 
13
11
  エリアで"選択肢B"を選んだらアトラクションで"選択肢d〜h"が表示されるというイメージです。
@@ -16,9 +14,7 @@
16
14
 
17
15
 
18
16
 
19
- ###現状
20
-
21
- エリアを選択してもアトラクションの選択肢が何も表示されません。
17
+ しかしながら、現状エリアを選択してもアトラクションの選択肢が何も表示されません。
22
18
 
23
19
  なお、post_form.htmlに記載しているの下記JavaScriptコードを削除すると、アトラクションの選択肢が全て表示されるようになることから、アトラクションのプルダウンにデータは渡されている状態ではあります。
24
20
 
@@ -32,23 +28,15 @@
32
28
 
33
29
  ###発生中のエラー
34
30
 
35
- Cheromeの検証モードにて、以下のエラーを確認しております。
36
-
37
- ①categoryListがundefinedになっている(post_form.htmlご参照)
38
-
39
- categoryListをfor文でループさせ、エリアに対応した選択肢を選ぶ方式をとっていますが、categoryList自体がundefinedになっているためループが始まらないのだと考えております。
40
-
41
-
42
-
43
- Uncaught TypeError: Object.key is not a function or its return value is not iterableが発生
31
+ エリアとアトラクションの情報が入っているArray(変数名:categoryList)からfor文でkeyと値をループして抽出するコードにて、「Uncaught TypeError: Object.key is not a function or its return value is not iterableが発生しています。
44
-
45
- post_form.htmlの下記部分について、上記エラーが発生しております。
32
+
46
-
33
+
34
+
47
- categoryListがiterableじゃないとのことですが、①の通りそもそもundefinedなので、解消されれば②も解決すのではと考えております。
35
+ 検証画面で確認したところ、エラーの直前にてcategoryList配列がundefinedっていが原因かと考えております。
48
-
49
-
50
-
36
+
37
+
38
+
51
- ただしこれ以上原因と解決方法がわからないため、お気づきの点についてご教示いただけますと幸いです。
39
+ ただし、なぜこの様になってしまうのかがわからないため、お気づきの点についてご教示いただけますと幸いです。
52
40
 
53
41
 
54
42
 

1

説明文を微修正

2021/11/06 07:03

投稿

minari766
minari766

スコア17

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  ###現状
20
20
 
21
- エリアを選択してもアトラクションの選択肢が表示されません。
21
+ エリアを選択してもアトラクションの選択肢が何も表示されません。
22
22
 
23
23
  なお、post_form.htmlに記載しているの下記JavaScriptコードを削除すると、アトラクションの選択肢が全て表示されるようになることから、アトラクションのプルダウンにデータは渡されている状態ではあります。
24
24