ページが更新されたときに、保存されたフィールドをJavaScriptで表示する方法 - Javascript Rails4

Question

私はJavascriptを初めて使用しています。オプション"only men"または"only women"が表示されているフィールド"quantity"を選択する

• オプション"both men & women"が"quantity_men" & "quantity_women"が表示されるフィールドを選択している私はオプションを選択し
"both men & women"とフィールド "quantity_men" & "quantity_women"私のqunatityを書いて、ページを保存して更新するとフィールドが隠されているときに表示されます

質問&女性は、私はページを更新すると隠されているからclass= specific_gender_quantity_contentを避けるか、どのように保存された男性の量に

• 。
• 私は以下のコードを試してみましたが、私は新しいですと、私はわからないですし、あなたの助けがはるかに

ビュー/イベント/ _form.html.erb

<%= f.association :category_quantitygender, collection: CategoryQuantitygender.all, prompt: "select a category", label: "Quantity Gender Selection" %> 
    <div class="general_gender_quantity_content"> 
     <%= f.input :quantity, placeholder: "quantity", label: false %> 
    </div> 
    <div class="specific_gender_quantity_content"> 
     <%= f.input :quantity_men, placeholder: "quantity men", label: "men" %> 
     <%= f.input :quantity_women, placeholder: "quantity women", label: "women" %> 
    </div> 

資産/ JavaScriptの/ events_formをいただければ幸いです.jsファイル

$(document).ready(function() { 
    $('.general_gender_quantity_content').hide(); 
    $('.specific_gender_quantity_content').hide(); 
    $('#social_category_quantitygender_id').change(function() { 
    if ($(this).val() == 3) { 
     $('.specific_gender_quantity_content').show(); 
     $('.general_gender_quantity_content').hide(); 
    } else if ($(this).val() == 1, 2) { 
     $('.general_gender_quantity_content').show(); 
     $('.specific_gender_quantity_content').hide(); 
    } 
    }); 
}); 

Answer 1

選択した値を取得して、選択した値に基づいてdivを非表示にすることができます。

$(document).ready(function() { 
var social_category_quantitygender_id = $('#social_category_quantitygender_id').val(); 
if (social_category_quantitygender_id == 3) { 
    $('.specific_gender_quantity_content').show(); 
} else if (social_category_quantitygender_id == 1, 2) { 
    $('.general_gender_quantity_content').show(); 
} else { 
    $('.general_gender_quantity_content').hide(); 
    $('.specific_gender_quantity_content').hide(); 
} 

}）;