Question

我想知道是否有人可以帮助我们尝试完成的代码示例。我在轨道中有一个下拉选择项目，包括订单类型，办公室订单和家庭订单。如果用户在下拉菜单中选择了home_field和text_area控件，则应该更改为此。

<%= f.text_field :home_address %>
<%= f.text_area :directions %>

如果他们选择办公室订单，则控件应更改为此

<%= f,text_field :office_address %>
<%= f.text_area :office_directions %>

我明白我应该使用ajax但是一个例子会很有帮助

编辑

这就是我所拥有的。它的轨道视图部分。

<%= form_for(@order) %> 
<select class="select">
  <option value="home">Home</option>
  <option value="office">Office</option>
</select>

<div id="home_address" style="display:none;">
   <%= f.text_field :home_address %>
   <%= f.text_area :directions %>
</div>

<div id="office_address" style="display:none;">
   <%= f,text_field :office_address %>
   <%= f.text_area :office_directions %>
</div>
<% end %>

<script type="text/javascript">
    $(document).ready(function() {
        $( ".select" ).change(function() {
            if(this.val() == 'office') {
            $('#office_address').show();
            } else {
            $('#home_address').show();
            }
        });
        });
</script>

Answer 1

您可以将这两对text_field和text_area与隐藏的

中的一部分放在一起

像

<div id="home_address" style="display:none">
<%= f.text_field :home_address %>
<%= f.text_area :directions %>
<div>
<div id="office_address" style="display:none">
<%= f.text_field :office_address %>
<%= f.text_area :office_directions %>
</div>

用于脚本

$( ".select" ).change(function() {
 if($(this).val() == 'office') {
   $('#home_address').hide();
   $('#office_address').show();
 } else {
   $('#office_address').hide();
   $('#home_address').show();
 }
});

修改

<%= form_for(@order) do |f| %> 
<select class="select_option">
  <option value="home">Home</option>
  <option value="office">Office</option>
</select>

<div id="home_fields" style="display:none;">
   <%= f.text_field :home_address %>
   <%= f.text_area :directions %>
</div>

<div id="office_fields" style="display:none;">
   <%= f.text_field :office_address %>
   <%= f.text_area :office_directions %>
</div>
<% end %>

<script type="text/javascript">
    $(document).ready(function() {
        $( ".select_option" ).change(function() {
            if($(this).val() == 'office') {
              $('#home_fields').hide();
              $('#office_fields').show();
            } else {
              $('#office_fields').hide();
              $('#home_fields').show();
            }
        });
        });
</script>

根据选定的下拉列表中的选定项目更改控件

1 个答案: