नेस्टेड ड्रॉप डाउन बॉक्स और बहु-चयन बॉक्स?

Question

मुझे एक आवश्यकता है जो शुरू करने के तरीके के साथ थोड़ा मुश्किल है और मैं कुछ मदद की तलाश में हूं। मेरे पास तीन सारणी हैं जैसे एपारेल्स, श्रेणियां और सामग्री। पर विचार करें परिधानों तालिका शामिल

----- पुरुषों पहनने

----- बच्चे

पहनें और मैं परिधान जोड़ने के लिए एक पृष्ठ है और जबकि परिधानों जोड़ने मैं एक बूंद की आवश्यकता है नीचे श्रेणियों को सूचीबद्ध करना चाहिए। श्रेणियों का चयन करने पर, चयनित श्रेणी से संबंधित सामग्री बहु-चयन बॉक्स में दिखाई देनी चाहिए जिससे हम कई सामग्रियों का चयन कर सकते हैं जिन्हें तालिका में सहेजा जाना है।

और श्रेणियों का चयन करने के लिए ड्रॉप डाउन को घोंसला जाना चाहिए क्योंकि हम एक से अधिक श्रेणियों का चयन भी कर सकते हैं और जब भी श्रेणी को जोड़ा जाता है तो उस श्रेणी से संबंधित एकाधिक चयन ड्रॉप डाउन श्रेणी ड्रॉप डाउन के बाद दिखाया जाना चाहिए।

निम्न छवि है कि स्पष्ट रूप से बताते हैं

पर विचार कैसे मैं मूल्यों है कि मैं इन तालिकाओं में से चयन को बचाने के लिए एक मेज बना सकते हैं?

अद्यतन:

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 

ऊपर मॉडल और उन लोगों के बीच संघों हैं। मैं एक ड्रॉप डाउन मेनू प्रदर्शित करना चाहता हूं और इसमें इस ड्रॉप डाउन पर श्रेणियां और अधिक शामिल होना चाहिए जब बहु-चयन बॉक्स को प्रत्येक ड्रॉप डाउन के नीचे प्रदर्शित किया जाना चाहिए ताकि वह सामग्री का चयन कर सके या मुझे बताएं कि क्या मैं बहु रखने की तरह कर सकता हूं ड्रॉप डाउन के बजाय चयन करें और प्रत्येक चयन पर एक और बहु-चयन बॉक्स से संबंधित मानों के साथ पॉप्युलेट किया जाना चाहिए। निम्न छवि स्पष्ट रूप से

Answer 1

मैं थोड़ा और अधिक जानकारी, विशेष रूप से कुछ कोड उदाहरण वास्तव में आप मदद करने के लिए की आवश्यकता होगी की व्याख्या करेगा। हालांकि यहां शुरू करने के लिए कुछ संसाधन यहां दिए गए हैं। जब आप कुछ लिखा है, तो वापस आ कृपया और मैं/अन्य आप आगे मदद कर सकते हैं :)

• Railscasts #88 - Dynamic select menus (revised) - यह railscast एक गतिशील चयन/लटकती मेनू बनाने के लिए कैसे, fx सामग्री बदल रहा है जब एक श्रेणी का चयन बताते हैं।
• Railscasts #196 - Nested model form (revised) - यह रेलसास्ट दिखाता है कि कैसे accepts_nested_attributes_for के साथ संबंधित रिकॉर्ड को गतिशील रूप से जोड़ना है। यह आपके लिए जरूरी नहीं है लेकिन कम से कम आपको एक बहु रिकॉर्ड फॉर्म बनाने के तरीके को समझने में मदद करेगा।

अद्यतन: कैसे गतिशील रूप से एक लटकती/चयन मेनू

ठीक है तो आप क्या चाहते हैं परिधानों की एक चयन मेनू (भी बुलाया लटकती मेनू) के लिए है, हर बार जब आप किसी श्रेणी का चयन (अपडेट हो जाता है को भरने के लिए एक से अधिक चयन मेनू में)।इस के लिए आप विधि 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 %> 

फिर हम संपत्ति निर्देशिका में कुछ जावास्क्रिप्ट जोड़ें::

पहले हम दृश्य बनाना चाहते हैं

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 के साथ कॉफीस्क्रिप्ट में लिखा गया है। यदि आप कॉफीस्क्रिप्ट का उपयोग नहीं करते हैं, तो एक टिप्पणी लिखें और मैं इसे सामान्य जावास्क्रिप्ट वाक्यविन्यास में लिखने की कोशिश करूंगा।