Question

我甚至理解如何在google中搜索我的问题场景。

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

示例：如果用户从下拉列表中选择“人”，则下面的form_fields应显示为“age”字段，“种族”字段等。

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

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

谁能说出如何实现这一目标？任何有关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中。

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

<强>的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是一个带静态标记的简单示例。

从下拉列表中动态创建表单字段

2 个答案: