如何通过更改 f.select 创建/销毁nested_form

Question

在我的 Rails 应用程序中，我有以下代码 在views/patients/_form.html.erb中

 <div class="field">
    <%= f.label :sex %><br />
    <%= f.select :sex, [['Male','Female'],['Θ','1']] %>
  </div>



  <div>
   <%= f.fields_for :female_patient do |fp| %>
    <%=render   "female_patient_fields", :f => fp %>
  <% end %>
  </div>
   <p><%=link_to_add_fields "Add Female Info", f, :female_patient %></p>

部分代码是这样的
在views/patients/_female_patient_fields.html.erb

 =====FEMALE INFO=====
      <div class="field">
    <%= f.label :childbirths %><br />
    <%= f.number_field :childbirths %>
  </div>
  <div class="field">
    <%= f.label :last_period %><br />
    <%= f.datetime_select :last_period %>
  </div>

  <p>
  <%= link_to_remove_fields "remove", f %>
  </p>
    ====================================
  </div>

和
是指向应用程序助手的链接，它们为附加字段创建和销毁嵌套表单。

在 helpers/application_helper.rp 中

module ApplicationHelper
 def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  end
def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
      render(association.to_s.singularize + "_fields", :f => builder)
    end
    link_to_function(name, "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")")
  end

end

链接工作正常，嵌套表单被创建/销毁，female_patient 对象被正确创建（或不）。 （患者模型与 female_patient 具有 has_one 关系。

我想不通的是，当性别的 f.select 字段（第一种形式）发生更改时，一种调用助手操作的方法。我希望嵌套表单在所选值为女性时出现，并在所选值为男性时消失。

编辑：使用的 jquery 函数是：

function remove_fields(link) {
  $(link).prev("input[type=hidden]").val("1");
  $(link).closest(".female").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).parent().before(content.replace(regexp, new_id));
}

提前致谢

Answer 1

您将使用 javascript（最有可能是 jquery）来显示/隐藏字段。您可以在女性患者字段周围的 div 上放置一个 id。然后，在您的 javascript 中，您甚至可以在性别选择框上附加一个 on change。然后更改事件的处理程序将确定是否显示/隐藏女性患者 div。

$(function() {
  if($('#patient_sex').length) {
    $('#patient_sex').on('change', function() {
      if($(this).val() == '1') {
        $('#female_patient_fields').show(); // or w/e you want to call the div
      } else {
        $('#female_patient_fields').hide();
      }
    });
  }
});

在视图中：

<div id="female_patient_fields">
  ... your form fields for 
</div>