将子类别分配给主类别

Question

在我当前的本地博客网站上，我可以创建类别和子类别。

我希望在创建帖子时，一旦您从下拉列表中选择类别，它将只显示可用的子类别。

示例：

在本例中，“选择了新闻”。所以我需要做两件事。首先，将我制作的子类别分配给特定类别。其次，根据选择的类别相应地显示子类别。

后模型

class Post < ActiveRecord::Base
  belongs_to :category
  belongs_to :subcategory
  has_many :comments

end

新帖子视图

<h2>Add New Post</h2>

<div class="well">
<%= form_for [:admin, @post] do |f| %>

    <div class="form-group">
        <%= f.label :title %>
        <%= f.text_field :title ,class:'form-control' %>
    </div>

    <div class="form-group">
        <%= f.label :category %>
        <%= f.select :category_id, Category.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'},class:'form-control' %>
    </div>

    <div class="form-group">
        <%= f.label :image %>
        <%= f.file_field :image %>  
    </div>
    <br>

    <div class="form-group">
        <%= f.label :subcategory %>
        <%= f.select :subcategory_id, Subcategory.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'},class:'form-control' %>
    </div>

    <div class="form-group">
        <%= f.label :body %>
        <%= f.text_area :body ,class:'form-control', id:'eg-textarea' %>
    </div>
    <br>
    <%= f.submit "Submit", class:'btn btn-primary' %>
    <%=link_to "Cancel", admin_posts_path, class:'btn btn-default' %>
<% end %>
</div>

帖子控制器

class Admin::PostsController < Admin::ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    @post.save
    redirect_to admin_posts_path
  end

  def edit
  end

  def update
  end

  def index
    @posts = Post.all
  end

  def show
  end

  def destroy
  end

  private
    def post_params
      params.require(:post).permit(:title, :category_id, :subcategory_id, :image, :body)
    end
end

Answer 1

你可以用 AJAX 做到这一点；见：Show the subcategories of the chosen category in Rails 4。

您还可以将所有子类别及其父类别 ID 作为对象数组放在admin/posts.coffee.erb 中。然后，在类别选择字段的change事件上，filter将所选类别ID的子类别列表放入一个新数组中，然后使用jQuery删除子类别字段中现有的选项标签，并将子类别的选项标签添加到子类别选择字段。

Answer 2

我会在上面添加一个隐藏表单。这避免了对 AJAX 和特殊路由的需要。使用 JavaScript/jQuery 将隐藏表单中的子类别拉到主表单中。我在这里写的populatesubs 函数就是这样做的。

也许这样的事情会起作用（如果有任何问题，请检查 DOM 元素 ID）：

<h2>Add New Post</h2>

<!-- The hidden form -->
<div style="display: none;">
  <% Category.all.each do |category| %>
    <%= select_tag :subcategory, options_for_select(category.subcategories.collect { |s| [s.name, s.id] }), id: "subcategory#{category.id}" %>
  <% end %>
</div>

<script type="text/javascript">
  // Change the subcategories form to have the subcategories of the selected category
  function populatesubs(category)
  {
    subcategory = '#subcategory' + category
    $('#post_subcategory_id').html($(subcategory).html());
  }
</script>



<div class="well">
<%= form_for [:admin, @post] do |f| %>

    <div class="form-group">
        <%= f.label :title %>
        <%= f.text_field :title ,class:'form-control' %>
    </div>

    <div class="form-group">
        <%= f.label :category %>
        <%= f.select :category_id, Category.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'}, class: 'form-control', onchange: 'populatesubs(this.value)' %>
    </div>

    <div class="form-group">
        <%= f.label :image %>
        <%= f.file_field :image %>  
    </div>
    <br>

    <div class="form-group">
        <%= f.label :subcategory %>
        <%= f.select :subcategory_id, Category.all.first.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'},class:'form-control' %>
    </div>

    <div class="form-group">
        <%= f.label :body %>
        <%= f.text_area :body ,class:'form-control', id:'eg-textarea' %>
    </div>
    <br>
    <%= f.submit "Submit", class:'btn btn-primary' %>
    <%=link_to "Cancel", admin_posts_path, class:'btn btn-default' %>
<% end %>
</div>