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

Question

我有一个关于如何开始的要求，我寻求一些帮助。我有三个表，分别是服装、类别和 Material 。考虑服装表包含

----- 男装

----- 童装

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

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

考虑下图清楚地解释了



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

更新:

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

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

Answer 1

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

Railscasts #88 - Dynamic select menus (revised) - 此 railscast 解释了如何制作动态选择/下拉菜单，在选择类别时更改 Material 。

Railscasts #196 - Nested model form (revised) - 此 railscast 显示了如何使用 accepts_nested_attributes_for 动态添加关联记录.这对您来说不一定很重要，但至少可以帮助您了解如何创建多记录表单。

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

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

首先我们要创建 View :

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