基于复选框Ruby on Rails的动态数组

Question

I have two lists of check boxes. One is a list of stores and one is a list of taxonomies that belong to those stores. Right now All taxonomies are shown regardless of what store is selected. How do I display the taxonomies that only belong to the stores that are selected?

html.erb

<h3>Stores Offered In</h3>
  <ul class="multi-column-checkbox">
    <% for store in Store.all %>
        <li><%= check_box_tag "idea[store_ids][]", store.id, 
@idea.stores.include?(store) %> <%= store.name %></li>
    <% end %>
  </ul>
  <br />


  <h3>Taxonomies Offered In</h3>
      <% for store in Store.all %>
     <% if store.has_taxonomies? %>
          <ul class="multi-column-checkbox-taxonomies" >
            <h4><%= store.name %></h4>
                <% for taxonomy in store.taxonomies 
%>              
                <li><%= check_box_tag "idea[taxonomy_ids][]", 
taxonomy.id, @idea.taxonomies.include?(taxonomy) %> <%= taxonomy.name %></li>
            <% end %>
          </ul>
     <% end %>
  <% end %>

taxonomy.rb

class Taxonomy < ActiveRecord::Base
  validates_presence_of :name, :store_id
  belongs_to :store
  has_and_belongs_to_many :ideas, :join_table => "taxonomies_ideas"

  validates_uniqueness_of :name, :scope => :store_id
end

store.rb

class Store < ActiveRecord::Base
  validates_uniqueness_of :code
  has_and_belongs_to_many :ideas, :join_table => "stores_ideas"
  has_many :taxonomies

  def has_taxonomies?
    taxonomies.count > 0
  end
end

I tried to create a helper in my application_helper.rb:

def show_hide(show)
  show ? 'block' : 'none'
end

and put this in my view:

 <h3>Taxonomies Offered In</h3>
      <% for store in Store.all %>
     <% if store.has_taxonomies? %>
            <ul class="multi-column-checkbox-taxonomies" style="display: <%= 
      show_hide(@application.______?)%>;" >
            <h4><%= store.name %></h4>
                <% for taxonomy in store.taxonomies 
%>              
                <li><%= check_box_tag "idea[taxonomy_ids][]", 
taxonomy.id, @idea.taxonomies.include?(taxonomy) %> <%= taxonomy.name %></li>
            <% end %>
          </ul>
     <% end %>

but I don't know the name of the method

I would like these store check boxes to control what taxonomies are shown possibly through a toggle function.

Answer 1

You need 2 things:

1. A way to map between the two datasets. Eg a map of which taxonomies belong to which stores.

2. A way to swap the values in the second set of check boxes based on the first set of check boxes. jQuery is a good candidate, but any javascript or even a page reload will do.

There is a similar question here along with some jsfiddles that should help you. They use dropdowns instead of check boxes, but the concepts are the exact same: using jquery how do I filter a dropdown field based on value selected from another dropdown field