teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

HTMLを記載しました

2021/06/22 04:50

投稿

ginia3150
ginia3150

スコア2

title CHANGED
File without changes
body CHANGED
@@ -9,11 +9,131 @@
9
9
  セレクトボックスの保存保持に使う記述がわからない状態です。
10
10
 
11
11
  ### 該当のソースコード
12
- 現在使用してる取得を押しときJava Scriptの記述は下記になります。
12
+ ご指摘いただいたで修正いたします。
13
13
 
14
14
  ```html
15
+ <%= render "shared/header" %>
16
+ <main>
17
+ <div class="basket">
18
+ <%= render "food" %>
19
+ <div class="basket-product">
20
+ <h2><span class="badge-primary">選択したテキスト</span></h2>
21
+ <h1><strong><span class="item-quantity"></span>食品名2</strong></h1>
22
+ <h1><strong><span class="item-quantity"></span>食品名3</strong></h1>
23
+ </div>
24
+ </div>
25
+ <aside>
26
+ <div class="summary">
27
+ <div class="summary-total-items"><span class="total-items"></span>各種合計値</div>
28
+ <div class="summary-total">
29
+ <div class="total-title">P</div>
30
+ <div class="total-value final-value" id="basket-total">0</div>
31
+ <div class="total-title">F</div>
32
+ <div class="total-value final-value" id="basket-total">0</div>
33
+ <div class="total-title">C</div>
34
+ <div class="total-value final-value" id="basket-total">0</div>
35
+ <div class="total-title">C</div>
36
+ <div class="total-value final-value" id="basket-total">0</div>
37
+ </div>
38
+ <div class="summary-checkout">
39
+ <button class="checkout-cta">Checkout</button>
40
+ </div>
41
+ </div>
42
+ </aside>
43
+ </main>
15
44
 
45
+ ```
46
+
47
+
48
+ ```html
49
+
50
+ <div class="pulldown">
51
+
52
+ <select class="mainselect" name="major_list">
53
+ <option class="foods" selected="selected">--食材の種類--</option>
54
+ <%= render "foods" %>
55
+ </select>
56
+
57
+
58
+
59
+ <select name="food_list" id="food-select">
60
+ <option class="foods" selected="food-selected">--食材選択--</option>
61
+ <option class="meat" id="">--肉類--</option>
62
+ <%= render "meat" %>
63
+ <option class="seafood" id="">--魚介類--</option>
64
+ <%= render "seafood" %>
65
+ <option class="egg" id="">--卵類--</option>
66
+ <%= render "egg" %>
67
+ <option class="beans">--豆類--</option>
68
+ <%= render "beans" %>
69
+ <option class="milk">--乳類--</option>
70
+ <%= render "milk" %>
71
+ <option class="grain">--穀類--</option>
72
+ <%= render "grain" %>
73
+ <option class="potato">--芋類及び澱粉類--</option>
74
+ <%= render "potato" %>
75
+ <option class="fruit">--果実類--</option>
76
+ <%= render "fruit" %>
77
+ <option class="nuts">--種実類--</option>
78
+ <%= render "nuts" %>
79
+ <option class="mushroom">--キノコ類--</option>
80
+ <%= render "mushroom" %>
81
+ <option class="alga">--藻類--</option>
82
+ <%= render "alga" %>
83
+ <option class="vegetable">--野菜類--</option>
84
+ <%= render "vegetable" %>
85
+ <option class="oils">--油脂類--</option>
86
+ <%= render "oils" %>
87
+ <option class="sugar">--砂糖及び甘味類--</option>
88
+ <%= render "sugar" %>
89
+ <option class="pastry">--菓子類--</option>
90
+ <%= render "pastry" %>
91
+ <option class="drink">--嗜好飲料類--</option>
92
+ <%= render "drink" %>
93
+ <option class="seasoning">--調味料及び香辛料類--</option>
94
+ <%= render "seasoning" %>
95
+ <option class="off-the-shelf">--調理済み流通食品類--</option>
96
+ <%= render "off-the-shelf" %>
97
+ </select>
98
+
99
+
100
+ <button onclick="hoge();" type="button" class="btn-text">取得</button>
101
+
102
+ <h2><span class="badge-primary">選択したテキスト</span></h2>
103
+
16
- <script>
104
+ <script>
105
+ $(function(){
106
+ //《selectタグ その①》路線を選択すると呼び出される関数
107
+ $('select[name="major_list"]').change(function(){
108
+ //《selectタグ その①》nameの値を取得
109
+ var line_class = $('select[name="major_list"] option:selected').attr("class");
110
+ console.log(line_class);
111
+  //《selectタグ その②》 子要素タグの個数を数え上げ
112
+ var count = $('select[name="food_list"]').children().length;
113
+ console.log(count);
114
+ for(a=0; a<count; a++){
115
+ var food_list = $('select[name="food_list"] option:eq('+a+')');
116
+      //《selectタグ その①》で選択した路線と等しいname値を持つoptionタグを表示
117
+ if(food_list.attr("class") === line_class){
118
+ food_list.show();
119
+ } else {
120
+ food_list.hide();
121
+ }
122
+ }
123
+     //《selectタグ その③》 子要素タグの個数を数え上げ
124
+ for(b=0; b<count; b++){
125
+ var status_list = $('select[name="status_list"] option:eq('+b+')');
126
+      //《selectタグ その②》で選択した駅と等しいname値を持つoptionタグを表示
127
+ if(status_list.attr("class") === line_class){
128
+ status_list.show();
129
+ } else {
130
+ status_list.hide();
131
+ }
132
+ }
133
+ });
134
+ });
135
+ </script>
136
+ <script>
17
137
  function hoge() {
18
138
 
19
139
  var obj = document.getElementById('food-select');
@@ -25,6 +145,7 @@
25
145
  document.getElementsByClassName('badge-primary')[0].textContent = txt;
26
146
  }
27
147
  </script>
148
+ </div>
28
149
  ```
29
150
 
30
151
  ### 試したこと