Как заполнить выпадающие списки (2 или более уровня глубины) категорией / подкатегорией в Rails, используя гем Ancestry

Question

У меня есть Rails 5.2.3, и я использую драгоценный камень предков.

Я хочу, чтобы пользователь создал предложение для автомобильной детали, но в новой форме я хочу иметь возможность выбрать категорию / подкатегорию, к которой принадлежит деталь, а затем заполнить другие детали, которые у меня есть. , а затем отправьте форму для создания предложения. Допустим, кто-то хочет продать тормозные колодки.

Итак, сначала нужно выбрать категорию / подкатегорию и так далее ...

(Таким образом, когда он выбирает Автомобиль, во втором выпадающем списке должны отображаться подкатегории для Автомобиля)

например:

Dropdown1: Автомобиль
Dropdown2: Тормоза

Так что после выбора Тормоза он может заполнить другие поля и отправить.

Что у меня есть:

Я уже создал категорию / подкатегорию в консоли, чтобы она работала: Например,

car = Category.create!(name: "Car")
brakes = Category.create!(name: "Brakes", parent: car)

#category.rb
class Category < ApplicationRecord
  has_ancestry cache_depth: true
  has_many :parts
end

#part.rb
class Part < ApplicationRecord
  belongs_to :category
end

#categories_controller.rb
class CategoriesController < ApplicationController
  def select_item
    category = @category.find(params[:category_id])
    render json: category.children
  end
end

#app/inputs/fake_select_input.rb
class FakeSelectInput < SimpleForm::Inputs::CollectionSelectInput
  def input(wrapper_options = nil)
    label_method, value_method = detect_collection_methods

    merged_input_options = 
    merge_wrapper_options(input_html_options, 
    wrapper_options).merge(input_options.slice(:multiple, 
    :include_blank, :disabled, :prompt))

    template.select_tag(
      attribute_name,
      template.options_from_collection_for_select(collection, 
      value_method, label_method, selected: 
      input_options[:selected], disabled: 
      input_options[:disabled]),
      merged_input_options
    )
  end
end

#routes.rb 
 Rails.application.routes.draw do
  resources :parts
  resources :categories, only: [] do
   get :select_item, on: :collection
  end
 end

#application.js
  $('#first-dropdown').on('change', function() {
    $.ajax({
    url: 'categories/select_item?category_id=' + $(this).val(),
    dataType: 'json',
    success: function(data) {
      var childElement = $('#second-dropdown');
      childElement.html('');
      data.forEach(function(v) {
        var id = v.id;
        console.log(id);
        var name = v.name;
        childElement.append('<option value="' + id + '">' + name + '</option>');
      });
     }
   });
 });

#views/parts/new.html.haml
  = simple_form_for @part do |f|
    = f.input :parent_category_id, as: :fake_select, collection: Category.roots, input_html: { id: 'first-dropdown' }, label: "Category"
    = f.input :category_id, collection: [], input_html: { id: 'second-dropdown' }, label: "Subcategory"
    = f.input :title
    = f.input :part_number
    = f.input :price, label: "Price"
    = f.input :condition, label: "Condition", prompt: "-", collection:([["New", "New"], ["Used", "Used"], ["Rebuilt", "Rebuilt"], ["Aftermarket/Imitation", "Aftermarket/Imitation"]])
    = f.input :make, label: "Part Make"
    = f.input :part_model_name, label: "Part Model"
    = f.input :description
    .form-group
      = f.button :submit, class: "btn btn-primary btn-block"

Дело в том, что Dropdown1 имеет категорию "Автомобиль", а Dropdown2 пуст. Может ли кто-нибудь помочь мне или предложить мне что-нибудь? У меня нет ошибок ни по чему другому, и я не могу двигаться дальше. (Я использую происхождение, потому что позже я добавлю много категорий / подкатегорий / подкатегорий и т. Д.)

Проблема: изображение моих выпадающих меню (при открытии второе пусто)