基于rails中的每个下拉菜单的嵌套下拉框和多选框？

Question

我有一个要求，开始时有点困难，我寻求一些帮助。我有三个表，即服装、类别和材料。考虑服装表包含

--男装

-----童装

我有一个页面来添加服装，在添加服装时，我需要一个下拉列表，其中应该列出类别。在选择类别时，属于所选类别的材料应该出现在多选框中，我们可以从中选择需要保存在表格中的多个材料。

选择类别的下拉菜单应该是嵌套的，因为我们还可以选择多个类别，每次添加一个类别时，与该类别相关的多选下拉菜单应该显示在类别下拉菜单之后。

请考虑以下清楚解释的图片

如何创建一个表格来保存我从这些表格中选择的值？

更新：

class Apparel < ActiveRecord::Base
    has_and_belongs_to_many :categories
end

class Category < ActiveRecord::Base
    has_and_belongs_to_many :apparels
    has_and_belongs_to_many :materials
end

class Material < ActiveRecord::Base
    has_and_belongs_to_many :categories
end

以上是模型和它们之间的关联。我想显示一个下拉菜单，并且应该包含类别，并且在选择的选择时，应在每个下拉时显示多个选择框，以便从中显示它们以选择材料或告诉我我是否可以保持多个-选择而不是下拉，并且在每次选择时，另一个多选框应填充与其相关的值。下图会解释清楚

Answer 1

我需要更多信息，尤其是一些代码示例来真正帮助您。但是，这里有一些资源可以帮助您入门。当你写了一些东西后，请回来，我/其他人可以进一步帮助你:)

• Railscasts #88 - Dynamic select menus (revised) - 此 railscast 解释了如何制作动态选择/下拉菜单，在选择类别时更改材料。
• Railscasts #196 - Nested model form (revised) - 这个 railscast 展示了如何动态添加与 accepts_nested_attributes_for 关联的记录。这对您来说不一定很重要，但至少可以帮助您了解如何创建多记录表单。

更新：如何动态填充下拉/选择菜单

好的，您想要的是有一个服装选择菜单（也称为下拉菜单），每次您选择一个类别时都会更新（在多选菜单中）。对此你可以使用Railscasts #88 - Dynamic select menus (revised)中显示的方法吗，但我在这里解释一下：

首先我们要创建视图：

<%= form_for @object do |f| %> # don't know what your form is for, but you can just change it accordantly 
  <%= f.collection_select(:category_ids, Category.all, :id, :name, {}, {:multiple => true, :id => 'category_select'})
  <%= f.grouped_collection_select :apparel_id, Category.all, :apparels, :name, :id, :name, {}, {:id => 'appare} %>
<% end %>

然后我们在 assets 目录中添加一些 javascript：

jQuery ->
  $('#apparel_select').hide() # hide the select menu
  apparels = $('#apparel_select').html() # get all the apparels in groups (the option and optgroup tags)

  $('#category_select').change -> # when selecting/deselecting a category, should we update the apparels select menu
    categories = $('#sel9UX :selected').map -> # find the selected categories
      $(this).text() 

    options = {} 
    $.each categories, (index, value) -> # find all the optgroups that should be shown
      options[value] = $(apparels).filter("optgroup[label='#{value}']")

    $('#apparel_select').html("") # empty the select menu
    $.each options, (key, value) -> # add each category group we have selected
      $('#apparel_select').append(value)

    $('#apparel_select').show() # show the select menu again

这是用 jQuery 用 CoffeeScript 编写的。如果你不使用 CoffeeScript，那么写一个评论，我会尝试用普通的 javascript 语法来写。