ネストされたドロップダウンボックスと、各ドロップダウンに基づくマルチ選択ボックスがレールにありますか？

Question

私はどのように起動するのが難しく、いくつかの助けを求める要件があります。私は3つのテーブル、すなわちアパレル、カテゴリー、材料を持っています。アパレルテーブルを考えてみましょう子供が

を着用し、私はアパレルを追加するためのページを持っているとアパレルを添加しながら、私はドロップを持っている必要があります-----

を着用

-----メンズが含まれていますカテゴリを一覧表示する必要があります。カテゴリを選択すると、選択したカテゴリに属する​​マテリアルがマルチ選択ボックスに表示され、そこから複数のマテリアルを選択してテーブルに保存する必要があります。

カテゴリをドロップダウンして複数のカテゴリを選択することができます。また、カテゴリが追加されるたびに、カテゴリがドロップダウンされた後にそのカテゴリに関連する複数の選択ドロップダウンが表示されます。

は私がこれらの表から選択した値を保存するためのテーブルを作成することができますどのように明確に

を説明し、次の画像を考えてみましょうか？

更新：

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 

上記は、それらの間のモデルと関連しています。私はドロップダウンメニューを表示する必要があります。カテゴリを含む必要があります。このドロップダウンの上に複数の選択ボックスが表示されている場合は、そのドロップダウンの下に表示され、そこからマテリアルを選択するか、ドロップダウンの代わりに-selectを選択し、それぞれの選択に別のマルチ選択ボックスに関連する値を入力する必要があります。以下の画像は明らかに

Answer 1

私は本当にあなたを助けるために、特にいくつかのコード例をもう少し情報が必要になります説明します。しかしここにあなたを始めるためのいくつかのリソースがあります。あなたが何かを書かれている場合は、その後、戻って来てくださいと私は/他の人が、さらにあなたを助けることができます:)

• Railscasts #88 - Dynamic select menus (revised) - このrailscastは、カテゴリを選択する際のfxは材料を変え、動的SELECT /ドロップダウンメニューを作成する方法について説明します。
• Railscasts #196 - Nested model form (revised) - このレールキャストは、accepts_nested_attributes_forという関連するレコードを動的に追加する方法を示しています。これは必ずしもあなたにとって重要ではありませんが、少なくともマルチレコードフォームを作成する方法を理解する上で役立ちます。

更新：動的にカテゴリを選択するたびに（更新ので、あなたは何をしたいアパレルの選択メニュー（とも呼ばれるドロップダウンメニュー）を持つことである

[OK]をドロップダウン/選択メニューを、移入する方法複数の選択メニューで）。このために、あなたは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 %> 

はその後、我々は、資産ディレクトリにいくつかの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シンタックスで記述しようとします。