javascript - Rails 茧 gem : populate multiple fields

Question

我正在使用cocoon gem在我的 Rails 应用程序上，我在表单中有两个嵌套字段(类别、子类别)。最初我只显示第一个，第二个被隐藏。每次第一个选择字段有子类别时，第二个字段就会填充并出现。

嵌套字段:

<div class="nested-fields">

  <%= form.input :category, collection: @categories, as: :grouped_select, group_method: :children, :label => false, :include_blank => true, input_html: { id: "first_dropdown" } %>

<div class="show_hide">
  <%= form.input :subcategories, label: false, :collection => [], :label_method => :name, :value_method => :id, required: true, input_html: { multiple: true, id: "second_dropdown" } %>
</div>

  <div class="links">
    <%= link_to_remove_association "Remove", form %>
  </div>
</div>

这是最初隐藏第二个字段的代码

$('#first_dropdown').keyup(function() {

    if ($(this).val().length == 0) {
        $('.show_hide').hide();
    }
}).keyup();

这是当第一个选择输入有子类别时显示第二个选择输入的代码:

def select_item
  category = Category.find params[:category_id]
  render json: category.children
end


$('#first_dropdown').on('change', function() {
    $.ajax({
        url: 'categories/select_item?category_id=' + $(this).val(),
        dataType: 'json',
        success: function(data) {
            let childElement = $('#second_dropdown');
            if( data.length === 0 ) {
                $('.show_hide').hide();
            } else {
                $('.show_hide').show();
            }
            childElement.html('');
            data.forEach(function(v) {
                let id = v.id;
                let name = v.name;
                childElement.append('<option value="' + id + '">' + name + '</option>');
            });
        }
    });
});

对于最初打开的字段来说，一切都运行良好。但是，当我添加更多字段并在任何第一个选择字段中选择一个值时，它会根据该值填充所有第二个字段。我认为这是因为我为此使用了特定的 id，当我添加更多字段时，所有字段最终都具有相同的 id。如何设置才能在每次向表单添加更多嵌套字段时正确填充第二个选择字段？

Answer 1

我会给你选择的类而不是 ID:

<div class="nested-fields">
  <%= form.input :category, collection: @categories, as: :grouped_select, group_method: :children,
                 label: false, include_blank: true, input_html: { class: "first_dropdown" } %>

  <% if f.object.category && f.object.category.sub_categories.length > 0 %>
    <div class="show_hide">
      <%= form.input :subcategories, label: false, collection: form.object.category.subcategories, label_method: :name,
                     value_method: :id, required: true, input_html: { multiple: true, class: "second_dropdown" } %>
    </div>
  <% else %>
    <div class="show_hide" style="display: none;">
      <%= form.input :subcategories, label: false, collection: [], label_method: :name,
                     value_method: :id, required: true, input_html: { multiple: true, class: "second_dropdown" } %>
    </div>
  <% end %>
  <div class="links">
    <%= link_to_remove_association "Remove", form %>
  </div>
</div>

然后找到相对于第一个选择的第二个选择，并将其添加到页面特定的 js 文件中:

$(document).on('turbolinks:load cocoon:after-insert', function(){
  $('.first_dropdown').off('change').on('change', function(){
    let $this = $(this);
    let $second = $this.closest('.nested-fields').find('.second_dropdown');
    $second.children().remove();
    $second.closest('.show_hide').hide();
    if ($this.val() !== '') {
      $.ajax({
        url: 'categories/select_item?category_id=' + $(this).val(),
        dataType: 'json',
        success: function(data){
          if (data.length > 0) {
            $second.append('<option value=""></option>');
            data.forEach(function(v) {
              let id = v.id;
              let name = v.name;
              $second.append('<option value="' + id + '">' + name + '</option>');
            });
            $second.closest('.show_hide').show();
          }
        }
      })
    }
  });
});