nested drop down box and multi-select box based on each drop down in rails?

Question

I have a requirement which is little difficult with how to start and i look for some help. I have three tables namely Apparels, categories and materials. Consider the apparels table contain

----- Mens wear

----- Children Wear

and i have a page to add the apparel and while adding apparels i need to have a drop down which should list the categories. On selecting the categories, the materials belonging to the selected category should appear in the multi-select box from which we can select the multiple materials which has to be saved in the table.

And the drop down to select the categories should be nested as we can also select more than one category and each time a category is added the multiple select drop down related to that category should be shown after the category drop down.

Consider the following image that clearly explains

How can i create a table for saving the values that i select from these tables?

Update:

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

The above are the models and associations between those. I want to display a drop down menu and that should contain the categories and more over this drop down when selected the multi-select box should be displayed below each drop down to select the materials from it or tell me if i can do like keeping multi-select instead of drop down and on each select the another multi-select box should be populated with the values related to it. The following image will explain clearly

Answer 1

I would need a bit more info, especially some code examples to really help you. However here is some resources to get you started. When you have written something, then please come back and i/others can help you further :)

• Railscasts #88 - Dynamic select menus (revised) - This railscast explains how to make a dynamic select/dropdown menu, fx changing the materials when selecting a category.
• Railscasts #196 - Nested model form (revised) - This railscast shows how to dynamically add associated records with accepts_nested_attributes_for. This is not necessarily important to you but will at least help you to understand how to create a multi record form.

Update: How to dynamically populate a dropdown/select menu

Ok so what you want is to have a select menu (also called dropdown menu) of apparels, that updates each time you select a category (in a multiple select menu). To this can you use the method shown in Railscasts #88 - Dynamic select menus (revised), but let me explain more here:

First we want to create the 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 %>

Then we add some javascript in the assets directory:

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

This is written in CoffeeScript with jQuery. If you don't use CoffeeScript, then write a comment and i will try to write it in the normal javascript syntax.