在窗体选择类别中，然后显示用户选择的类别。

我有一个可以创建产品的窗体。在表单中，您必须选择类别。在窗体选择类别中，然后显示用户选择的类别。

然后在它下面，我希望属于该类别的所有尺寸显示为复选框。

现在没有任何显示。我希望尺寸显示为复选框。

形式：

<%= javascript_include_tag "custom" %> 
<div class="container"> 
    <div class=“row”> 
    <div class="col-md-6 col-md-offset-3"> 
     <div class="panel panel-primary"> 
     <div class="panel-body"> 
      <%= simple_form_for @product, html: { multipart: true } do |f| %> 
      <%= f.input :image, label:"Choose Image" %> 

      <%= f.collection_select :category_id, @categories, :id, :name, include_blank: true, :prompt => "Select One Category" %> 
      <% @categories.each do |category| %> 
       <div class='sizes_container' id ='sizes_container_for_<%= category.id %>' style='display:none'> 
       <% category.sizes.each do |size| %> 
       #this is where the sizes will go as a a check box 
       <% end %> 
       </div> 
      <% end %> 

      <%= f.input :title, label:"Title"%> 
      <%= f.input :price, label:"Price"%> 
      <%= f.input :description,label:"Description" %> 
      <%= f.input :tag_list,label:"Tags - Seperate tags using comma ','. 5 tags allowed per product" %> 
      <%= f.button :submit, "Create new product", class: "btn-lg btn-success" %> 
      <% end %> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

型号：

class Product < ActiveRecord::Base 
    acts_as_taggable 

    belongs_to :user 
    belongs_to :category 

    has_many :product_sizes 

    validates :title, presence: true, length: { maximum: 30 } 
    validates :description, presence: true, length: { maximum: 2000 } 
    validates :category, :user_id, :price, presence: true 

    has_attached_file :image, styles: { large: "600x600", medium: "250x250", thumb:"100x100#"} 
    validates_attachment_content_type :image, content_type: /\Aimage\/.*\Z/ 
end 

class Category < ActiveRecord::Base 
    has_ancestry 

    has_many :products 
    has_many :sizes 

    validates :name, presence: true, length: { maximum: 20 }, uniqueness: true 

    accepts_nested_attributes_for :sizes, allow_destroy: true 
end 

class Size < ActiveRecord::Base 
    validates :title, presence: true, length: { maximum: 15 } 
    validates :title, uniqueness: true 

    belongs_to :category 
end

Javascirpt：

// custom.js 
$('#product_category_id').on('change', function(){ 
    $('.sizes_container input').hide(); 
    $('.sizes_container input').removeAttr('checked'); 
    $('#sizes_container_for_' + $(this).val()).show(); 
})

来源

2015-12-02 joeyk16

更新您的js代码也 –

我刚才添加了js @Dipak – joeyk16

您有正确的代码。检查控制台是否出现错误。因为你的代码应该可以工作，所以我没有看到任何问题。其他js问题限制它运行。如果此代码执行或不执行，请尝试添加警报。 –

下面的代码会隐藏和显示你的复选框。将此代码添加到您应用的某个位置。

// Change category_id with your select box id 
$('form').on('change', '#product_category_id'), function() { 
    var category_id = $(this).val(); // Save the category_id set in the first dropdown 
    $('.sizes_container').hide(); // To hide previously selected category if any 
    $('.sizes_container input').removeAttr('checked'); 
    $('sizes_container_for_' + category_id).show(); 
});

来源

2015-12-02 10:13:42

确保您的JS被加载文档准备
从表单中删除style='display:none'（做在JS）
从JS删除$('.sizes_container input')引用（什么都不做）

来源

2015-12-03 09:02:46 ecoologic

在窗体选择类别中，然后显示用户选择的类别。

回答

相关问题