动态类别和子类别选择器 [Rails 6]

Question

我想创建一个类别 Select 标签，当您 select 类别时，为另一个 select_tag 的子类别更改 select 选项类别 selected.

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

Answer 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 调用它。

动态类别和子类别选择器 [Rails 6]

Dynamic Category and Subcategory Selector [Rails 6]

ruby

ruby-on-rails

drop-down-menu

ruby-on-rails-6