5

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

----- 男装

----- 童装

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

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

考虑下面清楚解释的图像

在此处输入图像描述

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

更新：

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

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

在此处输入图像描述

4

1 回答 1

7

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

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

好的，所以您想要的是有一个服装选择菜单（也称为下拉菜单），每次您选择一个类别时都会更新（在多选菜单中）。为此，您可以使用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 语法来写。

于 2013-06-20T15:00:39.607 回答