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>

将子类别分配给主类别

2 个答案: