質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Q&A

3回答

1271閲覧

【HELP!泣】動的セレクトボックスから検索し、投稿一覧が表示されるように実装したい

susume

総合スコア13

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

0グッド

0クリップ

投稿2020/08/08 02:06

編集2022/01/12 10:55

前提・実現したいこと

**動的なセレクトボックスで作成した値を取得し、投稿したpostを検索したい
※動的なセレクトボックスは実装できたのですが、そこから投稿を検索させることができない状態です。

**現在個人アプリを開発中です。

アプリのコンセプトは、スノボー版インスタグラムです。

スノボーのセレクトボックスで選択した内容をもとに投稿一覧を表示させたいです。

イメージ説明

■セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。

searchアクションにどう記述すればいいのか、現段階で頭を悩ませているので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。

ちなみに現在のセレクトボックスの該当ソースコードは以下となります。

.home-snowB-search__comboBox .home-snowB-search__comboBox__snowBselect %label.seachBox-listname snowBを選ぶ %select.selectBoxLists{id: "parent", name: "snowB"} %option{value: "", class: "msg"} snowBを選択 %option{value: "snowboard"} ボード %option{value: "snowboots"} ブーツ %option{value: "binding"} ビンディング %br %p.synergy ✖️ .home-snowB-search__comboBox__brand %label.seachBox-listname ブランド %select.selectBoxLists{name: "ブランド", id: "children"} %option ブランドを選択 -# スノーボードのブランド %option{value: "Burton", "data-val": 'snowboard'} BURTON %option{value: "K2", "data-val": 'snowboard'} K2 %option{value: "Burton", "data-val": 'snowboard'} SALOMON -# ブーツのブランド %option{value: "Burton", "data-val": 'snowboots'} BURTON %option{value: "DEELUXE", "data-val": 'snowboots'} DEELUXE %option{value: "FLUX", "data-val": 'snowboots'} FLUX -# ビンディングのブランド %option{value: "BURTON", "data-val": 'binding'} BURTON %option{value: "UNION", "data-val": 'binding'} UNION %option{value: "FLUX", "data-val": 'binding'} FLUX

js

$(function() { let $children = $('#children'); let original = $children.html(); $('#parent').change(function() { let val1 = $(this).val(); $children.html(original).find('option').each(function() { let val2 = $(this).data('val'); if (val1 != val2) { $(this).not('.msg').remove(); } }); if ($(this).val() === '') { $children.attr('disabled', 'disabled'); } else { $children.removeAttr('disabled'); } }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/08/24 04:06

`searchアクション`とは何でしょうか?「チェックする」ボタンのクリックイベントハンドラのことですか?それとも`search`というアクションがサーバーのコントローラにあるのでしょうか?
susume

2020/08/24 10:24

searchアクションについて、コントローラーにdef searchと定義して、"チェックする"を押すと,投稿一覧が検索できるように実装することを指しています。 私的には、チェックするを押すと選択したカテゴリーの投稿一覧が取り出せればいいので、jsでクリックイベントが発火するのでもいいです。 どう記述すればいいのか、コードが全く進まず、困り果てています... それと、動的セレクトボックスのカテゴリーとブランドについて、現在select,optionタグを使っていますが、form_withとかに書き換えた方がいいのでしょうか?
退会済みユーザー

退会済みユーザー

2020/08/25 01:37

回答を追加しました。 select,optionタグについてですが、基本的な考え方として、フレームワークにヘルパーメソッドが存在するならHTML直書きよりもヘルパーメソッドを利用するべきです。多くの場合その方が簡潔に書けたり、セキュリティについても考慮されていることが多かったりとメリットがあります。 ただ、全てのヘルパーメソッドが全てのユースケースに対応しているわけではないので、必ずしも置き換え可能というわけではないです。また、UIが変わるわけでもないのでおそらく体感的なメリットはあまりないかと思われます。個人開発であれば置き換え作業は優先順位としては低くても問題ないと思います。
susume

2020/08/25 02:09

ご回答ありがとうございます。 個人アプリではタグでも大丈夫とのことで、書き換えの必要がなくなり安心しました。 また別件なんですが、投稿検索する前に、投稿にカテゴリー機能つけていなかったので、現在実装しています。 そこで問題になっているのが、 https://teratail.com/questions/287126#reply-407380 こちらになります。 別の質問で申し訳ないんですが、こちらの問題に時間使ってしまっているので、解決できそうでしょうか?
guest

回答3

0

3つの select box 全体を form で囲む。
その中に submit で「チェックする」を入れる、

というごく当たり前の実装で動きませんか?

投稿2020/08/24 23:13

winterboum

総合スコア23284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

susume

2020/08/25 02:11

formで全て囲むように一度実装してみますね!ありがとうございます。 それと別件で、投稿にそもそもカテゴリー機能をつけていなかったので、現在実装中です。 そこで以下のようなoptionsタグのhamlの書き方について困っています。 https://teratail.com/questions/287126#reply-407380 もしお時間があればで良いので、解決方法をご教示いただきたく。
guest

0

コントローラに投稿一覧の機能が既に定義されているのであれば、winterboumさんの回答の通り(当たり前の実装かどうかはさておき)、formタグにフォーム全体を入れてしまうのが簡単かと思われます。

実装については以下のURLが参考になると思います。

投稿2020/08/25 01:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

何らかのタイミングでsearchアクションに飛ばしwhere句で絞り込みブランドのオプションにする。
1.ボードの横に検索ボタンをつけてsearchアクションを実行する
2.javascriptでボードのセレクトの要素が変更するタイミングでseacrhアクションを実行する

この2パターンが僕が思いついた実装方法です。ちなみに前者の方が簡単です。

投稿2020/08/11 22:54

nasuk47

総合スコア311

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

susume

2020/08/22 09:52

ご返信遅れまして申し訳ございません。 やはり、現状実現したいのは、動的セレクトボックスで内容を選択し、最後にチェックするを押すと投稿一覧が表示されるようにしたいです。 恐れ入りますが、どんな感じでsearchアクションを飛ばせばいいのか1週間考えてみても分からなかったのでご教示いただけないでしょうか?
nasuk47

2020/08/22 11:04

検索したい箇所の横にリンクを設置してそのリンクをクリックするとsearchアクションを飛ばすという実装です。 formのsubmitみたいな感じです。 ``まずリンクを設置してsearchアクションに飛ぶようにする実装をしてみましょう`` そんなに悩みこまずにどんどん質問してください。1日考えれば十分です。
susume

2020/08/22 12:38

セレクトボックスごとに検索リンクつけるやり方ですと、ちょっと見栄えが悪いのかなという感じなので、できれば、上記の質問にあるように、動的セレクトボックスの親カテゴリーとブランドを選択し、チェックするを押すと投稿一覧が表示されるように実装したいです。 この場合ですと、やはり難易度がかなり跳ね上がるから、nasukさんのやり方が好ましいって感じでしょうか?
nasuk47

2020/08/22 22:19

ですね。 まず機能としてそこから見栄えにこだわった方がいいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問