Rails 带有 select2 的嵌套表单

Question

我对嵌套表单使用 cocoon gem，对自定义 selects 使用 select2。

第一个集合 select 已按预期运行。当我添加另一个 select 项目时，即使 select 项目具有相同的 class，它也不起作用。我尝试了解决方案。但它并没有解决我的问题。因为我调用了嵌套项的部分。

_form.html

 <%= simple_form_for(@course) do |f| %>
   <%= f.simple_fields_for :course_teachers do |course_teacher| %>
     <%= render "course_teacher_fields", :f => course_teacher %>
   <% end %>
   <div class="links">
     <%= link_to_add_association 'Add Teacher', f, :course_teachers, class:"btn btn-info" %>
   </div>
 <%end%>

_course_teacher_fields.html

<div class="nested-fields">
  <%= f.association :teacher, collection: Teacher.all, label_method: :full_name_with_title, input_html: {class: "teacher"} %><br/>
</div>

app.js

$(".teacher").select2({
  placeholder: "Select Teacher",
  allowClear: true
});

你有什么想法吗？

Answer 1

问题是您的 javascript 只在已渲染的项目上初始化 select2 一次（这就是为什么您对第一个 select 没有问题的原因) 但在你添加另一个之后，select2() 不会触发并且不会在该项目上初始化。

要解决此问题，请在 `cocoon:after-insert' 之后添加一个回调，并在添加的行上触发 select2 事件。

所以你的 javascript 应该是

function init_select2(selector){
  $(selector).select2({
    placeholder: "Select Teacher",
    allowClear: true
  });
};

init_select2(".teacher")

$("form").on("cocoon:after-insert", function(_, row){
  field = $(row).find(".teacher")
  init_select2(field);
});

我没有测试过这段代码，但我希望你能理解。

Rails 带有 select2 的嵌套表单

Rails nested form with select2

javascript

ruby-on-rails

jquery-select2