Рельсы динамические grouped_collection_select автоматически меняются

Question

У меня есть форма с 1 collection_select и 2 grouped_collection_select.

Все 3 начинаются со своего include_blank.Когда я выберу первый выбор коллекции, первый grouped_collection_select, следующий выбор, изменится автоматически.Проблема в том, что 2nd grouped_collection_select, следующий выбор (выбор 3d), не изменится вместе с ним.Он изменится только после повторного выбора 1-го grouped_collection_select.

Форма:

<%= form_for @shop_product do |f| %>
    <%= f.collection_select :category_id, @categories, :id, :title, include_blank: "Select Category" %>
    <%= f.grouped_collection_select :style_id, @categories.order(:title), :styles, :title, :id, :title, include_blank: "Select Style", prompt: "Selet Style 2"  %>
    <%= f.grouped_collection_select :item_id, @styles.order(:title), :items, :title, :id, :title, include_blank: "Select Item"  %>
    ...

Файл Javscript:

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 {
      return $('#shop_product_style_id').empty();
    }
  });
});

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 {
      return $('#shop_product_item_id').empty();
    }
  });
});

Модели:

**shop_product.rb**

  belongs_to :category
  belongs_to :style
  belongs_to :item

**category.rb**

  has_many :shop_products
  has_many :styles

**style.rb**

  has_many :shop_products
  belongs_to :category
  has_many :items

**item.rb**

  has_many :shop_products
  belongs_to :style

Является ли проблема, например:

1. Я выбираю категорию
2. Появляются стили, скажем, "толстовки" в поле выбора
3. Элемент не меняется.

Чтобы изменить Item, мне нужно выбрать поле: style_id, выбрать что-то, кроме «толстовки», повторно выбрать «толстовки», тогда появятся Предметы, которые имеют Item.style_id == "hoodies"

Я бы хотел, чтобы 3-й выбор для item_id изменился одновременно, style_id изменится при выборе @category.Кроме того, чтобы все они были сброшены, если @categories collection_select возвращается в «Выбрать категорию».

Как сделать так, чтобы все было одинаково вместе?Как может измениться поле: item_id grouped_collection_select, когда style_id делает это, поэтому мне не нужно повторно выбирать, чтобы изменить его?

Answer 1

Вы можете использовать trigger функцию

  ...
  else {
    return $('#shop_product_style_id').empty();
  }
  $('#shop_product_style_id').trigger('change')
});

это вызовет $('#shop_product_style_id').change(function...