Question

我有一个创建产品的表单。在表单中，您必须选择类别。

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

现在什么都没有显示出来。我希望尺寸显示为复选框。

形式：

<%= 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();
})

Answer 1

下面的代码会隐藏并显示您的复选框。在您的应用上的某处添加此代码。

// 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();
});

Answer 2

确保您的js已加载到doc ready
从表单中删除style='display:none'（在js中执行）
从js中删除$('.sizes_container input')引用（无所事事）

在表单中选择类别，然后显示category.sizes供用户选择

2 个答案: