検索フォームで、動的に変わるセレクトボックスを使いたい

Question

rails 5.2で検索画面を作ってるところです。

検索条件の入力項目として、「カテゴリ」＞「サブカテゴリ」と連動するセレクトボックスを追加したいです。

以下を参考にセレクトボックスを追加してみましたが、応用できずにいます・・・。
Ajaxでセレクトボックスの中身が動的に変わるRailsアプリの作り方

    <%= form_with url: items_path, method: :get, local: true do |f| %>
      
      <% category_options = Category.order(:id).map { |c| [c.name, c.id, data: { children_path: category_sub_categories_path(c) }] } %>
      <%= f.label :category_id %> <%= label_tag(:category, "", class: 'optional_field') %>
      <%= select :search, :category_id, category_options, {include_blank: ""}, {class: 'select-parent'} %>
      
      <% sub_categories = @item.category.try(:sub_categories) || [] %>
      <% sub_category_options = sub_categories.map { |c| [c.name, c.id] } %>
      <%= select :search, :sub_category_id, sub_category_options, {include_blank: ""}, {class: 'select-children'} %>
     
      <%= f.submit "検索" , class: "btn btn-default" %>
    <% end %>

1つ目のselectである「カテゴリ」は、表示され検索も出来ました。

問題は、2つ目のselectを作る部分です。
参考先では、下のように@itemを使っています。

<% sub_categories = @item.category.try(:sub_categories) || [] %>

今回作りたいのは検索フォームなので、関連するオブジェクトは不要かと思います。
この部分をどう記述すれば良いのでしょうか？

f.category.
や
Item.category.

とすると、違うようで下のエラーになります。

ActionView::Template::Error (undefined method `category' for #<ActionView::Helpers::FormBuilder:0x00007f88584ff8e8>):

それともここは、検索フォームですがコントローラから、

def index
  @item = Item.new
end

して
@itemを渡してあげるべきなのでしょうか？

初心者につき的外れの質問しているかもしれませんが、どうかアドバイス宜しくお願いします。

---

ご指摘により
以下から不足情報を追加

---

カテゴリモデル

class Category < ApplicationRecord
  has_many :sub_categories
  has_many :items
  default_scope -> { order(:order_number) }
end

サブカテゴリモデル

class SubCategory < ApplicationRecord
  belongs_to :category
  has_many :items
  default_scope -> { order(:order_number) }
end

アイテムモデル※検索したい対象

class Item < ApplicationRecord

  belongs_to :category
  belongs_to :sub_category
 

  scope :search, ->(search_params) do
    return if search_params.blank?
    
    keyword_like(search_params[:keyword])
    .category_id_is(search_params[:category_id])
    .sub_category_id_is(search_params[:sub_category_id])
  end
  scope :keyword_like, -> (keyword) { where('description LIKE ? or title LIKE ?', "%#{keyword}%","%#{keyword}%") if keyword.present? }
  scope :category_id_is, -> (category_id) { where(category_id: category_id) if category_id.present? }
  scope :sub_category_id_is, -> (sub_category_id) { where(sub_category_id: sub_category_id) if sub_category_id.present? }


 
end

---

不足情報を追加

---

コントローラ

class SubCategoriesController < ApplicationController
  def index

    @sub_categories = SubCategory.where(category_id: params[:category_id])    

    respond_to do |format|
      format.html do
      end
     
      format.js do
        render json: @sub_categories.select(:id, :name)
      end
    end
    
  end
end

coffeescript

$(document).on 'turbolinks:load', ->
    replaceSelectOptions = ($select, results) ->
      $select.html $('<option>')
      $.each results, ->
        option = $('<option>').val(this.id).text(this.name)
        $select.append(option)

    replaceChildrenOptions = ->
      childrenPath = $(@).find('option:selected').data().childrenPath
      $selectChildren = $(@).closest('form').find('.select-children')
      if childrenPath?
        $.ajax
          url: childrenPath
          dataType: "json"
          success: (results) ->
            replaceSelectOptions($selectChildren, results)
          error: (XMLHttpRequest, textStatus, errorThrown) ->
            console.error("Error occurred in replaceChildrenOptions")
            console.log("XMLHttpRequest: #{XMLHttpRequest.status}")
            console.log("textStatus: #{textStatus}")
            console.log("errorThrown: #{errorThrown}")
      else
        replaceSelectOptions($selectChildren, [])

    $('.select-parent').on
      'change': replaceChildrenOptions

---

分かった所までを追加

---

その後分かった所までを追記致します。

エラーログはブラウザ、サーバともに出てませんでした。

ただ、正常な流れは、
親（Category）のセレクトボックスを変更で
スクリプトのreplaceChildrenOptions = ->に飛ぶのに対し、
今回のこの画面は、
replaceChildrenOptions = ->に飛びません。
replaceChildrenOptions = ->の真下にalertで確認しました。

ここからまったく分かりません・・・。

---

htmlを追加

---

出力されてるhtmlを追記致します

<select class="select-parent" name="search[category_id]" id="search_category_id">
	<option value=""></option>
	<option data-children-path="/categories/1/sub_categories" value="1">野菜</option>
	<option data-children-path="/categories/2/sub_categories" value="2">果物</option>
	<option data-children-path="/categories/3/sub_categories" value="3">お肉</option>
	<option data-children-path="/categories/4/sub_categories" value="4">魚介</option>
</select>

<select class="select-children" name="search[sub_category_id]" id="search_sub_category_id">
	<option value=""></option>
	<option value="1">キャベツ</option>
	<option value="2">人参</option>
	<option value="3">玉ねぎ</option>
	<option value="4">ブロッコリー</option>
	<option value="5">もやし</option>
	<option value="6">レタス</option>
	<option value="7">トマト</option>
</select>
     

以下は登録画面のhtmlです。
こちらでも同じセレクトボックス連動を使用しており、こちらは正常に動作済みです。

<select class="select-parent" name="item[category_id]" id="item_category_id">
	<option value="">選択して下さい</option>
	<option data-children-path="/categories/1/sub_categories" value="1">野菜</option>
	<option data-children-path="/categories/2/sub_categories" value="2">果物</option>
	<option data-children-path="/categories/3/sub_categories" value="3">お肉</option>
	<option data-children-path="/categories/4/sub_categories" value="4">魚介</option>
</select>
      
<select class="select-children" name="item[sub_category_id]" id="item_sub_category_id">
	<option value="">選択して下さい</option>
</select>

Comments

[winterboum]

カテゴリーとサブカテゴリの関係がわかる様にしてください
同じモデルなのか違うモデルなのかもわからないし

[pecchan]

記載不足すみません、失礼しました。
追記致します。

Answer 1

sub_categories = @item.category.try(:sub_categories) || []

を

sub_categories = Category.first.sub_categories || []

にしてみたら、どうでしょうか。

Comments

[pecchan]

有難う御座います。
どのCategoryを選んでも同じ種類（先頭のCategoryに紐づく）のSubCategoryが表示されました。

具体的に言うと、カテゴリが、野菜、果物、魚介の場合、
どれを選んでもサブカテゴリは
キャベツ、人参、玉ねぎが表示がされます。

[Cojiro]

その部分はJavaScriptと別のコントローラ のアクションで実装してください。

貼ってくれたリンクに書いてあるまさにこの部分です。
----
ユーザーが親カテゴリが変更する
JavaScriptのchangeイベントが呼ばれる
JavaScriptがサーバーに子カテゴリの一覧を問い合わせる
サーバーが子カテゴリの一覧をJSONで返す
JavaScriptがサーバーから子カテゴリの一覧を受け取る
子カテゴリセレクトボックスの中身をサーバーから受け取った子カテゴリの一覧で置き換える
----

[pecchan]

度々すみません、有難う御座います。

JavaScriptと別のコントローラは、記載漏れでした。すみません。
一応実装はしておりました。

[Cojiro]

そうだったんですね。
では、親カテゴリのセレクトボックスを変更したときに、ブラウザのコンソールやサーバーのログにエラーなどは出力されていますか？

[pecchan]

有難う御座います。

確認したところ、セレクトボックスのチェンジイベントでログが一切出てませんでした。

まだ特定してませんが、イベントが走っていないのが原因かもしれません。

[Cojiro]

なるほど。

それでは、
やはり下記の内容が要点をまとめられているので、
これに基づいてどこまでできていて何ができていないのかをまずは把握するのが良さそうですね。
ブラウザ(JS)であれば、console.log、サーバーであればputsやloggerを使えばログを出力できるので、これらを利用しながら進めてみてください。

----
ユーザーが親カテゴリが変更する
JavaScriptのchangeイベントが呼ばれる
JavaScriptがサーバーに子カテゴリの一覧を問い合わせる
サーバーが子カテゴリの一覧をJSONで返す
JavaScriptがサーバーから子カテゴリの一覧を受け取る
子カテゴリセレクトボックスの中身をサーバーから受け取った子カテゴリの一覧で置き換える
----

[pecchan]

度々有難う御座います。

これは今回関係ないと思って記載してなかったのですが、検索画面は、モーダルウィンドウで実装してます。
※一覧画面上から詳細検索ボタンを押すと表示

つまりスクリプト読み込み時に、select boxは存在してない状態です。

これが原因でしょうか？

モーダルウィンドウ表示時に、モーダルウィンドウ？view？からスクリプトを再読み込みする方法はないでしょうか？
探していますが見つかりません。

それとも検討違いでしょうか？

[pecchan]

失礼しました。
choromeなのですが、「検証」で見たら、モーダルダイアログ表示前からselect box存在してました。

[pecchan]

親カテゴリのチェンジ時に、 replaceChildrenOptions = ->が呼ばれていないの原因でした。

replaceChildrenOptions = ->
の真下にalertでデバッグして確認しました。

なぜ呼ばれないのか、までは分かりませんでした（泣）

[Cojiro]

この辺りが原因ではないでしょうか。
https://teratail.com/questions/33833

[pecchan]

有難う御座います。
よく読んでみます。

[pecchan]

お世話になってます。
参考先は構文ミスが原因のようで、今回のこちらとは関係なさそうでした。

未だに検証中ですが、
モーダルウインドウ側に置いてた検索フォームを、index側に移動させると、changeイベントが正常に動作しました。
なので、やはりモーダルウィンドウが原因のように思います。

次に、モーダルウインドウ側で動的に生成していたselect boxをタグ直書きで置いてイベント発火するかだけを試すと、これはなぜか発火しませんでした。ここでお手上げ状態です（泣）
モーダルウインドウ上に「class = select-parent」というオブジェクトはあるのに操作できません。
エラーは出てません。
モーダルウインドウの特性がいまいち分からないのですが、
スクリプト側からモーダルウインドウは認識出来ないのでしょうか？

[pecchan]

元々ご提示いただいた、
sub_categories = Category.first.sub_categories || []
で紐づくデータは表示できてますので解決とさせていただきます。

モーダルウインドウになると駄目な件は、未解決ですが新たに質問を立てさせていただこうと思います。

この度はお付き合いいただき有難う御座いました。

[Cojiro]

そうでしたか。

参考までに、、、
スクリプトがDOMの読み込みができるのは、HTMLに表現されているもののみです。
pecchanさんのおっしゃってることが、正しいとすれば、
チェンジイベントを登録しているタイミングでは、まだモーダルのDOMができていないかもしれません。
デバッグして確かめてみるといいと思います。

CSSフレームワークを利用しているのであれば、フレームワーク側にそういった場合の回避方法がある可能性があるので、確認してみるといいかもしれません。

[pecchan]

有難う御座います。

「検証」で確認できたので、DOM生成済みと認識してました。

CSSフレームワークはbootstrapを使用してます。