仅显示所选类别的子类别 [英] Display just the subcategories of the chosen category

问题描述

这是我目前拥有的代码:

<%= f.collection_select :category_id, Category.all, :id, :name, {prompt: "Choose a category"} %><%= f.collection_select :subcategory_id, Subcategory.all, :id, :name, {prompt: "Choose a subcategory"} %>

它所做的只是在一个下拉列表中显示所有类别，在另一个所有下拉列表中显示子类别.像这样

<块引用>

问题:如何根据所选的主类别仅显示特定的子类别.使用上面的代码，它显示了所有类别和所有子类别.

模型中的所有内容、has_many 和belongs_to...以及category_id 和subcategory_id..一切都正常工作，我只是不知道如何显示所选类别中的特定子类别.

我的尝试:

 <% if (Category.where(:name=>"Intro")) do |d|％＞<% d.subcategories.each do |subcategory|％＞<%= link_to subcategory.name, gigs_path(subcategory: subcategory.name) %><%结束%><%结束%>

此代码出现错误.我想说，例如，如果用户选择名为介绍"的类别而不是列出所有介绍子类别".但它没有成功 - 我的代码显然是错误的.

谢谢.

解决方案

我假设您希望在不重新加载页面的情况下发生这种情况?那样你就不会使用 JavaScript 了.以下是一般工作流程:

• 当类别下拉列表发生更改时，发送一个 Ajax 请求，该请求将使用 JavaScript 进行响应并将正确的值插入到子类别下拉列表中.

为了这个例子，我假设你的表单(属于一个类别的模型)是一篇文章.你好像没有提到型号.

让我们试试这个:

观看次数/帖子/_form:
我将把子类别选择框包装在一个 subcategories_select div 中，这样我们就可以稍后替换整个内容.

<%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, id: "category_id" %><div id="subcategories_select"><%= f.collection_select :subcategory_id, Subcategory.all, :id, :name, { prompt: "Choose a subcategory" }, { disabled: true } %>

assets/javascripts/posts.js.erb

#选择要观察变化的元素$('form').on('change', '#category_id'), function() {var category_id = $(this).val();# 保存在第一个下拉列表中设置的 category_id$.ajax({url: "/categories/" + category_id + "/get_subcategories", #自定义路由，往下看routes.rb类型:获取"，dataType: "script", # 我们期待 js 格式的响应data: { "category_id": category_id } # 我们需要获取子类别的唯一值});});

config/routes.rb

# 我们需要为 get_subcategories 操作自定义路由资源:分类做会员做获取:get_subcategories，默认值:{ 格式:js"}结尾结尾

controllers/posts_controller.rb
重要提示:我假设一个类别有_许多子类别，而子类别有一个 category_id，这意味着属于一个类别.如果不是这样，以下内容将毫无意义.

# 我们的自定义控制器动作def get_subcategories@subcategories = Subcategory.where(category_id: params[:category_id])结尾

app/views/posts/get_subcategories.js.erb
在这里，我们将替换子类别_select div的内容，并使用适当的选项插入collection_select.

$('#subcategories_select').html("<%= j collection_select(:post, :category_id, @subcategories, :id, :title), { prompt: '选择子类别...'}, { 禁用: false } %>");

请注意，我是从头开始这样做的，所以可能会出现错误，但这是一种动态填充选择框的方法，或者通常无需重新加载即可更改页面上的任何内容.

This is the code I currently have:

<%= f.collection_select :category_id, Category.all, :id, :name, {prompt: "Choose a category"} %>
<%= f.collection_select :subcategory_id, Subcategory.all, :id, :name, {prompt: "Choose a subcategory"} %>

All it does is to display in one dropdown all the categories and in another all the subcategories. like this

Question: How to make just the specific subcategories appear depending on the chosen main category. With the code above, it shows all the categories and all subcategories.

Everything is linked in the model, the has_many, and belongs_to...and category_id and subcategory_id..everything is working properly, I just don't know how to show the specific subcategories within chosen category.

My attempt:

  <% if (Category.where(:name=>"Intro")) do |d| %>
    <% d.subcategories.each do |subcategory| %>
      <%= link_to subcategory.name, gigs_path(subcategory: subcategory.name) %>
    <% end %>
  <% end %>

This code gives an error. I though to say if, for example, the user picks the category called "Intro" than list all the "Intro subcategories". But it didn't work out - my code is obviously wrong.

Thank you.

解决方案

I assume you want this to happen without reloading the page? You won't get around a bit of JavaScript then. Here's the general workflow:

• when the category dropdown is changed, send an Ajax request which will respond with JavaScript and insert the correct values into the Subcategory dropdown.

For the sake of this example I will just assume that your form (the model that belongs to a category) is a post. You didn't seem to mention the model.

Let's try this:

views/posts/_form:
I will wrap the subcategories selct box in a subcategories_select div, which enables us to replace the whole content later.

<%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, id: "category_id" %>

<div id="subcategories_select">
 <%= f.collection_select :subcategory_id, Subcategory.all, :id, :name, { prompt: "Choose a subcategory" }, { disabled: true } %>
</div>

assets/javascripts/posts.js.erb

# select the element to watch for changes
$('form').on('change', '#category_id'), function() {
  var category_id = $(this).val(); # save the category_id set in the first dropdown

  $.ajax({
    url: "/categories/" + category_id + "/get_subcategories", # a custom route, see routes.rb further down
    type: "GET",
    dataType: "script", # we expect a response in js format
    data: { "category_id": category_id } # the only value we will need to get the subcategories
  });
});

config/routes.rb

# we need a custom route for our get_subcategories action
resources :categories do
  member do
    get :get_subcategories, defaults: { format: "js" }
  end
end

controllers/posts_controller.rb
Important: I assume that a category has_many subcategories and subcategories have a category_id, which meansbelong_to a category. If that's not the following won't make sense.

# our custom controller action
def get_subcategories
  @subcategories = Subcategory.where(category_id: params[:category_id])
end

app/views/posts/get_subcategories.js.erb
Here we will replace the content of our subcategories_select div and insert a collection_select with the appropriate options.

$('#subcategories_select').html("<%= j collection_select(:post, :category_id, @subcategories, :id, :title), { prompt: 'Select subcategory...' }, { disabled: false } %>");

Please note that I did this from the top of my head, so there might be errors, but this is one approach to dynamically populate select boxes, or in general change anything on a page without reloading.

这篇关于仅显示所选类别的子类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！