嵌套下拉框和多选框基于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解释了如何制作动态选择/下拉菜单，fx在选择类别时更改材料。
• 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

这是用CoffeeScript用jQuery编写的。如果你不使用CoffeeScript，那么写一个评论，我将尝试用正常的javascript语法编写它。