質問編集履歴

1

HTMLを記載しました

2021/06/22 04:50

投稿

ginia3150
ginia3150

スコア2

test CHANGED
File without changes
test CHANGED
@@ -20,15 +20,255 @@
20
20
 
21
21
  ### 該当のソースコード
22
22
 
23
- 現在使用してる取得を押しときJava Scriptの記述は下記になります。
23
+ ご指摘いただいたで修正いたします。
24
24
 
25
25
 
26
26
 
27
27
  ```html
28
28
 
29
-
29
+ <%= render "shared/header" %>
30
+
30
-
31
+ <main>
32
+
33
+ <div class="basket">
34
+
35
+ <%= render "food" %>
36
+
37
+ <div class="basket-product">
38
+
39
+ <h2><span class="badge-primary">選択したテキスト</span></h2>
40
+
41
+ <h1><strong><span class="item-quantity"></span>食品名2</strong></h1>
42
+
43
+ <h1><strong><span class="item-quantity"></span>食品名3</strong></h1>
44
+
45
+ </div>
46
+
47
+ </div>
48
+
49
+ <aside>
50
+
51
+ <div class="summary">
52
+
53
+ <div class="summary-total-items"><span class="total-items"></span>各種合計値</div>
54
+
55
+ <div class="summary-total">
56
+
57
+ <div class="total-title">P</div>
58
+
59
+ <div class="total-value final-value" id="basket-total">0</div>
60
+
61
+ <div class="total-title">F</div>
62
+
63
+ <div class="total-value final-value" id="basket-total">0</div>
64
+
65
+ <div class="total-title">C</div>
66
+
67
+ <div class="total-value final-value" id="basket-total">0</div>
68
+
69
+ <div class="total-title">C</div>
70
+
71
+ <div class="total-value final-value" id="basket-total">0</div>
72
+
73
+ </div>
74
+
75
+ <div class="summary-checkout">
76
+
77
+ <button class="checkout-cta">Checkout</button>
78
+
79
+ </div>
80
+
81
+ </div>
82
+
83
+ </aside>
84
+
85
+ </main>
86
+
87
+
88
+
89
+ ```
90
+
91
+
92
+
93
+
94
+
95
+ ```html
96
+
97
+
98
+
99
+ <div class="pulldown">
100
+
101
+
102
+
103
+ <select class="mainselect" name="major_list">
104
+
105
+ <option class="foods" selected="selected">--食材の種類--</option>
106
+
107
+ <%= render "foods" %>
108
+
109
+ </select>
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+ <select name="food_list" id="food-select">
118
+
119
+ <option class="foods" selected="food-selected">--食材選択--</option>
120
+
121
+ <option class="meat" id="">--肉類--</option>
122
+
123
+ <%= render "meat" %>
124
+
125
+ <option class="seafood" id="">--魚介類--</option>
126
+
127
+ <%= render "seafood" %>
128
+
129
+ <option class="egg" id="">--卵類--</option>
130
+
131
+ <%= render "egg" %>
132
+
133
+ <option class="beans">--豆類--</option>
134
+
135
+ <%= render "beans" %>
136
+
137
+ <option class="milk">--乳類--</option>
138
+
139
+ <%= render "milk" %>
140
+
141
+ <option class="grain">--穀類--</option>
142
+
143
+ <%= render "grain" %>
144
+
145
+ <option class="potato">--芋類及び澱粉類--</option>
146
+
147
+ <%= render "potato" %>
148
+
149
+ <option class="fruit">--果実類--</option>
150
+
151
+ <%= render "fruit" %>
152
+
153
+ <option class="nuts">--種実類--</option>
154
+
155
+ <%= render "nuts" %>
156
+
157
+ <option class="mushroom">--キノコ類--</option>
158
+
159
+ <%= render "mushroom" %>
160
+
161
+ <option class="alga">--藻類--</option>
162
+
163
+ <%= render "alga" %>
164
+
165
+ <option class="vegetable">--野菜類--</option>
166
+
167
+ <%= render "vegetable" %>
168
+
169
+ <option class="oils">--油脂類--</option>
170
+
171
+ <%= render "oils" %>
172
+
173
+ <option class="sugar">--砂糖及び甘味類--</option>
174
+
175
+ <%= render "sugar" %>
176
+
177
+ <option class="pastry">--菓子類--</option>
178
+
179
+ <%= render "pastry" %>
180
+
181
+ <option class="drink">--嗜好飲料類--</option>
182
+
183
+ <%= render "drink" %>
184
+
185
+ <option class="seasoning">--調味料及び香辛料類--</option>
186
+
187
+ <%= render "seasoning" %>
188
+
189
+ <option class="off-the-shelf">--調理済み流通食品類--</option>
190
+
191
+ <%= render "off-the-shelf" %>
192
+
193
+ </select>
194
+
195
+
196
+
197
+
198
+
199
+ <button onclick="hoge();" type="button" class="btn-text">取得</button>
200
+
201
+
202
+
203
+ <h2><span class="badge-primary">選択したテキスト</span></h2>
204
+
205
+
206
+
31
- <script>
207
+ <script>
208
+
209
+ $(function(){
210
+
211
+ //《selectタグ その①》路線を選択すると呼び出される関数
212
+
213
+ $('select[name="major_list"]').change(function(){
214
+
215
+ //《selectタグ その①》nameの値を取得
216
+
217
+ var line_class = $('select[name="major_list"] option:selected').attr("class");
218
+
219
+ console.log(line_class);
220
+
221
+  //《selectタグ その②》 子要素タグの個数を数え上げ
222
+
223
+ var count = $('select[name="food_list"]').children().length;
224
+
225
+ console.log(count);
226
+
227
+ for(a=0; a<count; a++){
228
+
229
+ var food_list = $('select[name="food_list"] option:eq('+a+')');
230
+
231
+      //《selectタグ その①》で選択した路線と等しいname値を持つoptionタグを表示
232
+
233
+ if(food_list.attr("class") === line_class){
234
+
235
+ food_list.show();
236
+
237
+ } else {
238
+
239
+ food_list.hide();
240
+
241
+ }
242
+
243
+ }
244
+
245
+     //《selectタグ その③》 子要素タグの個数を数え上げ
246
+
247
+ for(b=0; b<count; b++){
248
+
249
+ var status_list = $('select[name="status_list"] option:eq('+b+')');
250
+
251
+      //《selectタグ その②》で選択した駅と等しいname値を持つoptionタグを表示
252
+
253
+ if(status_list.attr("class") === line_class){
254
+
255
+ status_list.show();
256
+
257
+ } else {
258
+
259
+ status_list.hide();
260
+
261
+ }
262
+
263
+ }
264
+
265
+ });
266
+
267
+ });
268
+
269
+ </script>
270
+
271
+ <script>
32
272
 
33
273
  function hoge() {
34
274
 
@@ -52,6 +292,8 @@
52
292
 
53
293
  </script>
54
294
 
295
+ </div>
296
+
55
297
  ```
56
298
 
57
299