Используя grouped_collection_select с помощью сквозных ассоциаций? (2 уровня в глубину)

Question

Цель : Чтобы использовать grouped_collection_select (или другой метод) для загрузки доступных размеров, связанных с 2 моделями, моделью Item и Color.

У меня есть динамическая форма с использованием grouped_collection_select и jquery:

<%= f.grouped_collection_select :style_id, @categories.order(:title), :styles, :title, :id, :title, include_blank: "Select Style"  %>
<%= f.grouped_collection_select :item_id, @styles.order(:title), :items, :title, :id, :title, include_blank: "Select Item"  %>
<%= f.grouped_collection_select :color_id, @items.order(:title), :colors, :title, :id, :title, include_blank: "Select Color"  %>
<%= f.grouped_collection_select :size_id, @items.order(:title), :sizes, :title, :id, :title, include_blank: "Select Color"  %>
#attempt 2 for getting size related to the item/color
<%= f.grouped_collection_select :size_id, @colors.order(:title), :sizes, :title, :id, :title, include_blank: "Select Color"  %>

Форма для создания ShopProduct

Это прекрасно работает до выбора цвета .....

Файл Javascript : последняя функция кода важна для рассмотрения

jQuery(function() {
  var styles;
  styles = $('#shop_product_style_id').html();
  console.log(styles);
  return $('#shop_product_category_id').change(function() {
    var category, escaped_category, options;
    category = $('#shop_product_category_id :selected').text();
    escaped_category = category.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(styles).filter("optgroup[label=" + category + "]").html();
    console.log(options);
    if (options) {
      $('#shop_product_style_id').html(options);
      return $('#shop_product_style_id').parent().show();
    } else {
      // $('#shop_product_style_id').empty();
      return $('#shop_product_style_id').empty();
    }
    // $('#shop_product_style_id').trigger('change')
  });
});

jQuery(function() {
  var items;
  items = $('#shop_product_item_id').html();
  console.log(items);
  return $('#shop_product_style_id').change(function() {
    var style, escaped_style, options;
    style = $('#shop_product_style_id :selected').text();
    escaped_style = style.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(items).filter("optgroup[label=" + style + "]").html();
    console.log(options);
    if (options) {
      $('#shop_product_item_id').html(options);
      return $('#shop_product_item_id').parent().show();
    } else {
      // $('#shop_product_item_id').empty();
      return $('#shop_product_item_id').empty();
    }
  });
});

jQuery(function() {
  var colors;
  colors = $('#shop_product_color_id').html();
  console.log(colors);
  return $('#shop_product_item_id').change(function() {
    var item, escaped_item, options;
    item = $('#shop_product_item_id :selected').text();
    escaped_item = item.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(colors).filter("optgroup[label=" + item + "]").html();
    console.log(options);
    if (options) {
      $('#shop_product_color_id').html(options);
      return $('#shop_product_color_id').parent().show();
    } else {
      // $('#shop_product_color_id').empty();
      return $('#shop_product_color_id').empty();
    }
  });
});

    jQuery(function() {
  var sizes;
  sizes = $('#shop_product_size_id').html();
  console.log(sizes);
  return $('#shop_product_item_id').change(function() {
    var item, escaped_item, options;
    item = $('#shop_product_item_id :selected').text();
    escaped_item = item.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');

    // need to cross reference color and item
    // color = $('#shop_product_color_id :selected').text();
    // escaped_color = color.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');

    options = $(sizes).filter("optgroup[label=" + item + "]").html();
    console.log(options);
    if (options) {
      $('#shop_product_size_id').html(options);
      return $('#shop_product_size_id').parent().show();
    } else {
      return $('#shop_product_size_id').empty();
    }
  });
});

Это хорошо работает там, где я хочу выбрать size на основе выбранных item и color. Потому что некоторые элементы могут не иметь определенных размеров в некоторых item.color.sizes. Синий может иметь S, а только M .. Красный может иметь S-XL .... Мне нужно убедиться, что отображаемые размеры доступны в цвете Item.

В данный момент последняя функция кода настроена так, чтобы отображать размеры в зависимости от выбранного элемента. Но мне нужны размеры в зависимости от выбранного элемента и цвета.

Я помечаю javascript / jquery и rails, потому что я не уверен, возможно ли это с помощью rails или нужен javascript / jq.

Вопрос: Есть ли способ перекрестной ссылки на элемент и цвет для получения размера в файле javascript?

Если есть способ сделать это только с рельсами, у меня есть перечисленные ниже модели.

Что-то вроде:

<%= f.grouped_collection_select :size_id, @items.where(:color).order(:title), :sizes, :title, :id, :title, include_blank: "Select Size"  %>

Я уверен, что это может быть сделано только с JS / JQuery, так как rails не сможет динамически показывать результаты в зависимости от того, что было выбрано без отправки первым.

Мои модели:

class Item < ApplicationRecord
  has_many :products
  has_many :shop_products
  belongs_to :style
  has_many :colors, through: :products
  has_many :sizes, through: :products
end

class Color < ApplicationRecord
  has_many :products
  has_many :shop_products
  has_many :sizes, through: :products
  has_many :items, through: :products
end

class Size < ApplicationRecord
  has_many :product
  has_many :colors, through: :products
  # has_many :items, through: :products
end

class Style < ApplicationRecord
  has_many :products
  has_many :shop_products
  belongs_to :category
  has_many :items
end

По сути, в Продукте хранятся все возможные продукты, которые в итоге могут быть созданы в ShopProduct. Думайте об этом, как о TeeSpring, где вы выбираете продукты для настройки и в конечном итоге создаете «ShopProduct» (own_to: product), который будет «продуктом» в вашем собственном магазине.

Как я могу получить размеры на основе выбранного элемента и выбранного цвета?