Rails 动态 grouped_collection_select 自动改变

Question

我有一个包含 1 个 collection_select 和 2 个 grouped_collection_select 的表单。

所有 3 个都是从他们的 include_blank 开始的。当我选择第一个集合选择时，第一个 grouped_collection_select，下一个选择，将自动更改。问题是第二个 grouped_collection_select，下一个选择（3d 选择），选项不会随之改变。只有当我重新选择第一个 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"  %>
    ...

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 {
      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. 项目没有改变。

为了更改项目，我需要选择 :style_id 字段，选择“hoodies”以外的其他内容，重新选择“hoodies”，然后会出现带有Item.style_id == "hoodies"的项目

我希望item_id 的第三个选择在选择@category 时同时更改style_id。如果@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...