0

誰かが達成しようとしていることのコードサンプルを手伝ってくれるのだろうか. レールには、注文の種類、オフィス注文、ホーム注文のドロップダウン選択項目があります。ユーザーがドロップダウン メニューでホーム オーダーを選択すると、その下の 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

これらの 2 つの text_field と text_area のペアを、1 つの部分を非表示にして配置できます。

お気に入り

<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 に答える