从下拉菜单中即时创建表单字段

Question

我什至不明白如何在 google 中搜索我的问题场景。

问题：当用户从下拉列表中进行选择时，以下表单字段应相应更改。

示例：如果用户从下拉菜单中选择“人类”，则 form_fields 下方应显示为“年龄”字段、“种族”字段等。

如果用户从下拉菜单中选择“事件”，下面的表单字段应显示“日期”、“地点”等。

默认情况下，我们会有“提交”按钮。

谁能告诉我如何做到这一点？对 simple_form ruby​​ gem 的任何帮助也会有所帮助。

Answer 1

您可以使用一些简单的 javascript 来做到这一点。假设您有一个包含以下字段的表单

<%= f.select :some_field, %w[Human Cat], {}, {:class => 'my-select'}  %>

<div class="human">
  <%= f.label :age %><br>
  <%= f.text_field :age %>
</div>

<div class="cat" style="display:none;">
  <%= f.label :sub_species %><br>
  <%= f.text_field :sub_species %>
</div>

现在添加一些 javascript 使其动态

<script>
  $(".my-select").change(function(){
if($(".my-select").val() == "Human"){
  $(".human").css('display', 'block');
  $(".cat").css('display', 'none');
}else{
  $(".human").css('display','none');
  $(".cat").css('display', 'block');
}
  })
</script>

Answer 2

使用simple_form gem 和一些简单的javascript 很容易实现。

查看

<%= simple_form_for @object do |f| %>
  <%= f.input :attribute_name, :collection => ['Human', 'Event'], :input_html => { :class => 'dropdown' %>

  <div class="toggle human" style="display:none;">
    <%= f.input :age %>
  </div>

  <div class="toggle event" style="display:none;">
    <%= f.input :date %>
  </div>

  <%= f.button :submit %>

<% end %>

这里的关键是用特定的选择器将您要在div 中切换的字段包装起来。

然后我们在下拉字段中查找更改事件，并相应地切换我们的divs。

Javascript

$('.dropdown').change(function() {
  // hide divs first
  $('form .toggle').hide();

  // get value from dropdown
  var divClass = $('.dropdown').val().toLowerCase();

  // show necessary div
  $('.' + divClass).show();
});

使用这种方法，您不需要为下拉列表的每个值编写特定大小写，但可以使用下拉列表的小写值作为div 的选择器。

Here 是一个带有静态标记的简单示例。