teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【HELP!泣】動的セレクトボックスから検索し、投稿一覧が表示されるように実装したい

編集履歴

質問編集履歴

7

追記の削除

2020/08/22 09:49

投稿

susume
susume

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,12 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+ **動的なセレクトボックスで作成した値を取得し、投稿したpostを検索したい
4
+
5
+ ※動的なセレクトボックスは実装できたのですが、そこから投稿を検索させることができない状態です。
6
+
7
+
8
+
3
- 現在プログラミングスクールに通いながら、個人アプリを開発中です。
9
+ **現在個人アプリを開発中です。
4
10
 
5
11
 
6
12
 
@@ -8,11 +14,7 @@
8
14
 
9
15
 
10
16
 
11
- スノボーのアイテムに応じて投稿一覧を表示したり、絞り込み検索をしようと考えています。
17
+ スノボーのセレクトボックスで選択した内容をもとに投稿一覧を表示させたいです。
12
-
13
-
14
-
15
- そこで、実現したいことは2点あります。
16
18
 
17
19
 
18
20
 
@@ -20,51 +22,11 @@
20
22
 
21
23
 
22
24
 
23
- ①動的なセレクトボックスを作成し、snowBを選んだら、それに連動するブランドを選択できるようにしたい
25
+ ■セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
24
26
 
25
27
 
26
28
 
27
- ②セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
28
-
29
-
30
-
31
- つまり、snowBを選ぶで、ボード、ブーツ、ヘルメットの中から、例えばブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ただしヘルメットのブランドが出てこないようにする)
32
-
33
-
34
-
35
- このような実装をしたい場合、どんな実装をすればいいのでしょうか？
36
-
37
-
38
-
39
- ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
40
-
41
-
42
-
43
- 【追記】
44
-
45
- ①に関しては、
46
-
47
- https://qiita.com/bass-inu/items/8526cf677599c7d9bbb0
48
-
49
-
50
-
51
- こちらの記事を参考に動的セレクトボックスを作成することに成功しました。
52
-
53
-
54
-
55
- ![![イメージ説明](e43cf3c48206d5430bae2daa24a30679.png)](7f04743973280e710d305f92888fa55c.png)
56
-
57
-
58
-
59
- ![イメージ説明](d9e3b721c745655bf201264f2c61bbe9.png)
60
-
61
-
62
-
63
- このようにボードを選択するとボードのブランドが、ブーツを選択すると、ブーツのブランドが表示されます。
64
-
65
-
66
-
67
- ②に関して、なかなか解決できないので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。
29
+ searchアクションにどう記述すればいいのか、現段階で頭を悩ませているので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。
68
30
 
69
31
 
70
32
 

6

動的セレクトボックスは解決されたことの追記

2020/08/22 09:49

投稿

susume
susume

スコア13

test CHANGED
@@ -1 +1 @@
1
- 【HELP!泣】セレクトボックスから検索し、投稿一覧が表示されるように実装したい
1
+ 【HELP!泣】動的セレクトボックスから検索し、投稿一覧が表示されるように実装したい
test CHANGED
@@ -20,11 +20,11 @@
20
20
 
21
21
 
22
22
 
23
- ・セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
23
+ ①動的なセレクトボックスを作成し、snowBを選んだら、それに連動するブランドを選択できるようにしたい
24
24
 
25
25
 
26
26
 
27
- ・snowBを選ぶ→ブーツ、ビンディング、ヘルメットを選んだ項目によって、次の項目のブランドにはそれぞれのブランドが表示されるようにしたい。
27
+ ②セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
28
28
 
29
29
 
30
30
 
@@ -37,3 +37,143 @@
37
37
 
38
38
 
39
39
  ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
40
+
41
+
42
+
43
+ 【追記】
44
+
45
+ ①に関しては、
46
+
47
+ https://qiita.com/bass-inu/items/8526cf677599c7d9bbb0
48
+
49
+
50
+
51
+ こちらの記事を参考に動的セレクトボックスを作成することに成功しました。
52
+
53
+
54
+
55
+ ![![イメージ説明](e43cf3c48206d5430bae2daa24a30679.png)](7f04743973280e710d305f92888fa55c.png)
56
+
57
+
58
+
59
+ ![イメージ説明](d9e3b721c745655bf201264f2c61bbe9.png)
60
+
61
+
62
+
63
+ このようにボードを選択するとボードのブランドが、ブーツを選択すると、ブーツのブランドが表示されます。
64
+
65
+
66
+
67
+ ②に関して、なかなか解決できないので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。
68
+
69
+
70
+
71
+ ちなみに現在のセレクトボックスの該当ソースコードは以下となります。
72
+
73
+ ```
74
+
75
+ .home-snowB-search__comboBox
76
+
77
+ .home-snowB-search__comboBox__snowBselect
78
+
79
+ %label.seachBox-listname snowBを選ぶ
80
+
81
+ %select.selectBoxLists{id: "parent", name: "snowB"}
82
+
83
+ %option{value: "", class: "msg"} snowBを選択
84
+
85
+ %option{value: "snowboard"} ボード
86
+
87
+ %option{value: "snowboots"} ブーツ
88
+
89
+ %option{value: "binding"} ビンディング
90
+
91
+ %br
92
+
93
+ %p.synergy ✖️
94
+
95
+
96
+
97
+ .home-snowB-search__comboBox__brand
98
+
99
+ %label.seachBox-listname ブランド
100
+
101
+ %select.selectBoxLists{name: "ブランド", id: "children"}
102
+
103
+ %option ブランドを選択
104
+
105
+ -# スノーボードのブランド
106
+
107
+ %option{value: "Burton", "data-val": 'snowboard'} BURTON
108
+
109
+ %option{value: "K2", "data-val": 'snowboard'} K2
110
+
111
+ %option{value: "Burton", "data-val": 'snowboard'} SALOMON
112
+
113
+ -# ブーツのブランド
114
+
115
+ %option{value: "Burton", "data-val": 'snowboots'} BURTON
116
+
117
+ %option{value: "DEELUXE", "data-val": 'snowboots'} DEELUXE
118
+
119
+ %option{value: "FLUX", "data-val": 'snowboots'} FLUX
120
+
121
+ -# ビンディングのブランド
122
+
123
+ %option{value: "BURTON", "data-val": 'binding'} BURTON
124
+
125
+ %option{value: "UNION", "data-val": 'binding'} UNION
126
+
127
+ %option{value: "FLUX", "data-val": 'binding'} FLUX
128
+
129
+ ```
130
+
131
+ js
132
+
133
+ ```
134
+
135
+ $(function() {
136
+
137
+ let $children = $('#children');
138
+
139
+ let original = $children.html();
140
+
141
+
142
+
143
+ $('#parent').change(function() {
144
+
145
+ let val1 = $(this).val();
146
+
147
+
148
+
149
+ $children.html(original).find('option').each(function() {
150
+
151
+ let val2 = $(this).data('val');
152
+
153
+ if (val1 != val2) {
154
+
155
+ $(this).not('.msg').remove();
156
+
157
+ }
158
+
159
+ });
160
+
161
+
162
+
163
+ if ($(this).val() === '') {
164
+
165
+ $children.attr('disabled', 'disabled');
166
+
167
+ } else {
168
+
169
+ $children.removeAttr('disabled');
170
+
171
+ }
172
+
173
+
174
+
175
+ });
176
+
177
+ });
178
+
179
+ ```

5

タイトルの変更

2020/08/17 07:25

投稿

susume
susume

スコア13

test CHANGED
@@ -1 +1 @@
1
- セレクトボックスから検索し、投稿一覧が表示されるように実装したい
1
+ 【HELP!泣】セレクトボックスから検索し、投稿一覧が表示されるように実装したい
test CHANGED
File without changes

4

アプリのコンセプトを追加

2020/08/10 13:42

投稿

susume
susume

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,18 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+ 現在プログラミングスクールに通いながら、個人アプリを開発中です。
4
+
5
+
6
+
7
+ アプリのコンセプトは、スノボー版インスタグラムです。
8
+
9
+
10
+
11
+ スノボーのアイテムに応じて投稿一覧を表示したり、絞り込み検索をしようと考えています。
12
+
13
+
14
+
3
- 実現したいことは2点あります。
15
+ そこで、実現したいことは2点あります。
4
16
 
5
17
 
6
18
 
@@ -16,7 +28,7 @@
16
28
 
17
29
 
18
30
 
19
- つまり、snowBを選ぶで、ブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ヘルメットのブランドが出てこないようにする)
31
+ つまり、snowBを選ぶで、ボード、ブーツ、ヘルメットの中から、例えばブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ただしヘルメットのブランドが出てこないようにする)
20
32
 
21
33
 
22
34
 

3

画像の位置を変更

2020/08/09 10:37

投稿

susume
susume

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,10 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
3
  実現したいことは2点あります。
4
+
5
+
6
+
7
+ ![イメージ説明](b51f0c69a2af3a882d99fea6dc3488d4.png)
4
8
 
5
9
 
6
10
 
@@ -16,10 +20,6 @@
16
20
 
17
21
 
18
22
 
19
- ![イメージ説明](b51f0c69a2af3a882d99fea6dc3488d4.png)
20
-
21
-
22
-
23
23
  このような実装をしたい場合、どんな実装をすればいいのでしょうか？
24
24
 
25
25
 

2

追記

2020/08/09 10:12

投稿

susume
susume

スコア13

test CHANGED
@@ -1 +1 @@
1
- セレクトボックスから検索する機能を実装したい
1
+ セレクトボックスから検索し、投稿一覧が表示されるように実装したい
test CHANGED
@@ -1,35 +1,27 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
3
+ 実現したいことは2点あります。
4
4
 
5
5
 
6
6
 
7
- この機能を実装するためには、カテゴリー機能がいいでしょうか？それともタグ機能の方がベストなのでしょうか？
7
+ ・セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
8
+
9
+
10
+
11
+ ・snowBを選ぶ→ブーツ、ビンディング、ヘルメットを選んだ項目によって、次の項目のブランドにはそれぞれのブランドが表示されるようにしたい。
12
+
13
+
14
+
15
+ つまり、snowBを選ぶで、ブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ヘルメットのブランドが出てこないようにする)
16
+
17
+
8
18
 
9
19
  ![イメージ説明](b51f0c69a2af3a882d99fea6dc3488d4.png)
10
20
 
11
21
 
12
22
 
13
- 様々な検索機能を調べていくうちにどれが実現したい内容できるのか困ってしまい今回質問させていただくことになりました。
23
+ このような実装をしたい場合、どんな実装をすればいいのでしょうか？
14
24
 
15
25
 
16
26
 
17
- 今回参考にしたサイトは以下です。
18
-
19
-
20
-
21
- タグ機能
22
-
23
- https://qiita.com/ddd555/items/e1caa8b73d118822a0a2
27
+ ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
24
-
25
-
26
-
27
- カテゴリー機能
28
-
29
- https://qiita.com/kaito_program/items/3755f071625f9f5bbaba
30
-
31
-
32
-
33
- ソート機能
34
-
35
- https://oasist-blog-ja.hatenablog.jp/entry/sorting_without_ransack

1

参考にした記事の追加

2020/08/08 15:14

投稿

susume
susume

スコア13

test CHANGED
File without changes
test CHANGED
@@ -11,3 +11,25 @@
11
11
 
12
12
 
13
13
  様々な検索機能を調べていくうちにどれが実現したい内容できるのか困ってしまい今回質問させていただくことになりました。
14
+
15
+
16
+
17
+ 今回参考にしたサイトは以下です。
18
+
19
+
20
+
21
+ タグ機能
22
+
23
+ https://qiita.com/ddd555/items/e1caa8b73d118822a0a2
24
+
25
+
26
+
27
+ カテゴリー機能
28
+
29
+ https://qiita.com/kaito_program/items/3755f071625f9f5bbaba
30
+
31
+
32
+
33
+ ソート機能
34
+
35
+ https://oasist-blog-ja.hatenablog.jp/entry/sorting_without_ransack