【问题标题】: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 中。无论如何都赞成:)
猜你喜欢
  • 2017-10-08
  • 1970-01-01
  • 2019-04-19
  • 1970-01-01
  • 1970-01-01
  • 2016-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多