0

我想知道是否有人可以帮助提供我想要完成的代码示例。我在 Rails 中有一个下拉选择项目，其中包含订单类型、办公室订单和家庭订单。如果用户在下拉菜单中选择家庭订单，则其下方的 text_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>
4

1 回答 1

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>
于 2013-08-02T07:54:04.653 回答