动态类别和子类别选择器 [Rails 6] [重复]答案

【问题标题】：Dynamic Category and Subcategory Selector [Rails 6] [duplicate]动态类别和子类别选择器 [Rails 6] [重复]
【发布时间】：2020-07-23 10:56:45
【问题描述】：

我想创建一个类别选择标签，当您选择类别时，它会更改另一个 select_tag 的选择选项，其中包含属于所选类别的子类别。

我尝试了刺激反射，但我对结果不满意，还有其他方法吗？用于Project模型的_form.html.erb，不刷新页面怎么办？

【问题讨论】：

是的，但我想知道是否有更好的 rails 6 方式，因为自从 rails 4 以来，很多事情都发生了变化。
要么需要刷新页面，要么使用javascript更新DOM。

标签： ruby-on-rails ruby drop-down-menu ruby-on-rails-6

【解决方案1】：

传递您的类别，包括它们的子类别

@categories = Category.includes(:subcategories)

然后在第一个选择器上对其进行迭代。

<select id="category" name="category_id">
  <% @categories.each do |category| %>
    <option value="<%= category.id %>"><%= category.name %></option>
  <% end %>
</select>

<select id="subcategory" name="subcategory_id" disabled></select>

在第二个选择器上使用javascript 根据第一个输入值动态生成他的元素。在第一个上放置一个监听器，以跟踪它的值何时发生变化。

<script>
  var categories = <%= @categories %>
  $("#category").change(function(e) {
    var subcategories = [];
    var selectedCategoryId = $(this).val();

    $('#subcategory').empty();

    subcategories = categories.find(x => x.id === selectedCategoryId).subcategories;
    subcategories.each(function (sub) {
       $('#subcategory').appendChild(`<option value="${sub.id}">${sub.name}</option>`);
    });
    $('#subcategory').prop('disabled', false);
  });
</script>

这会奏效。您也可以创建一个助手并通过 ajax 调用它。

【讨论】：

该问题可能重复，但您的解决方案更好，并且该问题在另一个问题之前出现在 Google 中。无论如何都赞成:)