嵌套下拉框和多选框基于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 - 动态选择菜单(修订版) - 此railscast解释了如何制作动态选择/下拉菜单,fx在选择类别时更改材料.
• Railscasts#196 - 嵌套模型表单(修订版) - 此railscast显示如何动态添加相关记录accepts_nested_attributes_for.这对您来说不一定重要,但至少可以帮助您了解如何创建多记录表单.

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

好吧你想要的是有一个服装的选择菜单(也称为下拉菜单),每次你选择一个类别时更新(在多选菜单中).为此可以使用Railscasts#88 - 动态选择菜单(修订版)中显示的方法,但让我在这里解释一下:

首先,我们要创建视图:

<%= 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语法编写它.