質問編集履歴
7
追記の削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,38 +1,19 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
|
-
|
|
2
|
+
**動的なセレクトボックスで作成した値を取得し、投稿したpostを検索したい
|
|
3
|
+
※動的なセレクトボックスは実装できたのですが、そこから投稿を検索させることができない状態です。
|
|
3
4
|
|
|
5
|
+
**現在個人アプリを開発中です。
|
|
6
|
+
|
|
4
7
|
アプリのコンセプトは、スノボー版インスタグラムです。
|
|
5
8
|
|
|
6
|
-
スノボーの
|
|
9
|
+
スノボーのセレクトボックスで選択した内容をもとに投稿一覧を表示させたいです。
|
|
7
10
|
|
|
8
|
-
そこで、実現したいことは2点あります。
|
|
9
|
-
|
|
10
11
|
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
■セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
searchアクションにどう記述すればいいのか、現段階で頭を悩ませているので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。
|
|
15
16
|
|
|
16
|
-
つまり、snowBを選ぶで、ボード、ブーツ、ヘルメットの中から、例えばブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ただしヘルメットのブランドが出てこないようにする)
|
|
17
|
-
|
|
18
|
-
このような実装をしたい場合、どんな実装をすればいいのでしょうか？
|
|
19
|
-
|
|
20
|
-
ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
|
|
21
|
-
|
|
22
|
-
【追記】
|
|
23
|
-
①に関しては、
|
|
24
|
-
https://qiita.com/bass-inu/items/8526cf677599c7d9bbb0
|
|
25
|
-
|
|
26
|
-
こちらの記事を参考に動的セレクトボックスを作成することに成功しました。
|
|
27
|
-
|
|
28
|
-
](7f04743973280e710d305f92888fa55c.png)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
このようにボードを選択するとボードのブランドが、ブーツを選択すると、ブーツのブランドが表示されます。
|
|
33
|
-
|
|
34
|
-
②に関して、なかなか解決できないので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。
|
|
35
|
-
|
|
36
17
|
ちなみに現在のセレクトボックスの該当ソースコードは以下となります。
|
|
37
18
|
```
|
|
38
19
|
.home-snowB-search__comboBox
|
6
動的セレクトボックスは解決されたことの追記
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【HELP!泣】セレクトボックスから検索し、投稿一覧が表示されるように実装したい
|
|
1
|
+
【HELP!泣】動的セレクトボックスから検索し、投稿一覧が表示されるように実装したい
|
body
CHANGED
|
@@ -9,12 +9,82 @@
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
①動的なセレクトボックスを作成し、snowBを選んだら、それに連動するブランドを選択できるようにしたい
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
②セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
|
|
15
15
|
|
|
16
16
|
つまり、snowBを選ぶで、ボード、ブーツ、ヘルメットの中から、例えばブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ただしヘルメットのブランドが出てこないようにする)
|
|
17
17
|
|
|
18
18
|
このような実装をしたい場合、どんな実装をすればいいのでしょうか？
|
|
19
19
|
|
|
20
|
-
ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
|
|
20
|
+
ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
|
|
21
|
+
|
|
22
|
+
【追記】
|
|
23
|
+
①に関しては、
|
|
24
|
+
https://qiita.com/bass-inu/items/8526cf677599c7d9bbb0
|
|
25
|
+
|
|
26
|
+
こちらの記事を参考に動的セレクトボックスを作成することに成功しました。
|
|
27
|
+
|
|
28
|
+
](7f04743973280e710d305f92888fa55c.png)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
このようにボードを選択するとボードのブランドが、ブーツを選択すると、ブーツのブランドが表示されます。
|
|
33
|
+
|
|
34
|
+
②に関して、なかなか解決できないので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。
|
|
35
|
+
|
|
36
|
+
ちなみに現在のセレクトボックスの該当ソースコードは以下となります。
|
|
37
|
+
```
|
|
38
|
+
.home-snowB-search__comboBox
|
|
39
|
+
.home-snowB-search__comboBox__snowBselect
|
|
40
|
+
%label.seachBox-listname snowBを選ぶ
|
|
41
|
+
%select.selectBoxLists{id: "parent", name: "snowB"}
|
|
42
|
+
%option{value: "", class: "msg"} snowBを選択
|
|
43
|
+
%option{value: "snowboard"} ボード
|
|
44
|
+
%option{value: "snowboots"} ブーツ
|
|
45
|
+
%option{value: "binding"} ビンディング
|
|
46
|
+
%br
|
|
47
|
+
%p.synergy ✖️
|
|
48
|
+
|
|
49
|
+
.home-snowB-search__comboBox__brand
|
|
50
|
+
%label.seachBox-listname ブランド
|
|
51
|
+
%select.selectBoxLists{name: "ブランド", id: "children"}
|
|
52
|
+
%option ブランドを選択
|
|
53
|
+
-# スノーボードのブランド
|
|
54
|
+
%option{value: "Burton", "data-val": 'snowboard'} BURTON
|
|
55
|
+
%option{value: "K2", "data-val": 'snowboard'} K2
|
|
56
|
+
%option{value: "Burton", "data-val": 'snowboard'} SALOMON
|
|
57
|
+
-# ブーツのブランド
|
|
58
|
+
%option{value: "Burton", "data-val": 'snowboots'} BURTON
|
|
59
|
+
%option{value: "DEELUXE", "data-val": 'snowboots'} DEELUXE
|
|
60
|
+
%option{value: "FLUX", "data-val": 'snowboots'} FLUX
|
|
61
|
+
-# ビンディングのブランド
|
|
62
|
+
%option{value: "BURTON", "data-val": 'binding'} BURTON
|
|
63
|
+
%option{value: "UNION", "data-val": 'binding'} UNION
|
|
64
|
+
%option{value: "FLUX", "data-val": 'binding'} FLUX
|
|
65
|
+
```
|
|
66
|
+
js
|
|
67
|
+
```
|
|
68
|
+
$(function() {
|
|
69
|
+
let $children = $('#children');
|
|
70
|
+
let original = $children.html();
|
|
71
|
+
|
|
72
|
+
$('#parent').change(function() {
|
|
73
|
+
let val1 = $(this).val();
|
|
74
|
+
|
|
75
|
+
$children.html(original).find('option').each(function() {
|
|
76
|
+
let val2 = $(this).data('val');
|
|
77
|
+
if (val1 != val2) {
|
|
78
|
+
$(this).not('.msg').remove();
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
if ($(this).val() === '') {
|
|
83
|
+
$children.attr('disabled', 'disabled');
|
|
84
|
+
} else {
|
|
85
|
+
$children.removeAttr('disabled');
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
```
|
5
タイトルの変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
セレクトボックスから検索し、投稿一覧が表示されるように実装したい
|
|
1
|
+
【HELP!泣】セレクトボックスから検索し、投稿一覧が表示されるように実装したい
|
body
CHANGED
|
File without changes
|
4
アプリのコンセプトを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
|
-
|
|
2
|
+
現在プログラミングスクールに通いながら、個人アプリを開発中です。
|
|
3
3
|
|
|
4
|
+
アプリのコンセプトは、スノボー版インスタグラムです。
|
|
5
|
+
|
|
6
|
+
スノボーのアイテムに応じて投稿一覧を表示したり、絞り込み検索をしようと考えています。
|
|
7
|
+
|
|
8
|
+
そこで、実現したいことは2点あります。
|
|
9
|
+
|
|
4
10
|
|
|
5
11
|
|
|
6
12
|
・セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
|
|
7
13
|
|
|
8
14
|
・snowBを選ぶ→ブーツ、ビンディング、ヘルメットを選んだ項目によって、次の項目のブランドにはそれぞれのブランドが表示されるようにしたい。
|
|
9
15
|
|
|
10
|
-
つまり、snowBを選ぶで、ブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ヘルメットのブランドが出てこないようにする)
|
|
16
|
+
つまり、snowBを選ぶで、ボード、ブーツ、ヘルメットの中から、例えばブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ただしヘルメットのブランドが出てこないようにする)
|
|
11
17
|
|
|
12
18
|
このような実装をしたい場合、どんな実装をすればいいのでしょうか？
|
|
13
19
|
|
3
画像の位置を変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
実現したいことは2点あります。
|
|
3
3
|
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
・セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
|
|
5
7
|
|
|
6
8
|
・snowBを選ぶ→ブーツ、ビンディング、ヘルメットを選んだ項目によって、次の項目のブランドにはそれぞれのブランドが表示されるようにしたい。
|
|
7
9
|
|
|
8
10
|
つまり、snowBを選ぶで、ブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ヘルメットのブランドが出てこないようにする)
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
12
|
このような実装をしたい場合、どんな実装をすればいいのでしょうか？
|
|
13
13
|
|
|
14
14
|
ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
|
2
追記
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
セレクトボックスから検索
|
|
1
|
+
セレクトボックスから検索し、投稿一覧が表示されるように実装したい
|
body
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
|
-
|
|
2
|
+
実現したいことは2点あります。
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
・セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。
|
|
5
|
-
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
・snowBを選ぶ→ブーツ、ビンディング、ヘルメットを選んだ項目によって、次の項目のブランドにはそれぞれのブランドが表示されるようにしたい。
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
つまり、snowBを選ぶで、ブーツを選択→ブランドを選ぶでは、ブーツのブランドが選べるようにする(ヘルメットのブランドが出てこないようにする)
|
|
10
9
|
|
|
11
|
-
タグ機能
|
|
12
|
-
|
|
10
|
+
|
|
13
11
|
|
|
14
|
-
カテゴリー機能
|
|
15
|
-
|
|
12
|
+
このような実装をしたい場合、どんな実装をすればいいのでしょうか？
|
|
16
13
|
|
|
17
|
-
ソート機能
|
|
18
|
-
|
|
14
|
+
ちなみにチェックするを最後に選択すると、選んだ項目で検索を絞り、その検索結果の投稿一覧を表示させたいです。
|
1
参考にした記事の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,4 +4,15 @@
|
|
|
4
4
|
この機能を実装するためには、カテゴリー機能がいいでしょうか？それともタグ機能の方がベストなのでしょうか？
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
様々な検索機能を調べていくうちにどれが実現したい内容できるのか困ってしまい今回質問させていただくことになりました。
|
|
7
|
+
様々な検索機能を調べていくうちにどれが実現したい内容できるのか困ってしまい今回質問させていただくことになりました。
|
|
8
|
+
|
|
9
|
+
今回参考にしたサイトは以下です。
|
|
10
|
+
|
|
11
|
+
タグ機能
|
|
12
|
+
https://qiita.com/ddd555/items/e1caa8b73d118822a0a2
|
|
13
|
+
|
|
14
|
+
カテゴリー機能
|
|
15
|
+
https://qiita.com/kaito_program/items/3755f071625f9f5bbaba
|
|
16
|
+
|
|
17
|
+
ソート機能
|
|
18
|
+
https://oasist-blog-ja.hatenablog.jp/entry/sorting_without_ransack
|