Как показать поле, только если пользователь выбрал конкретную опцию в форме рельсов

Question

В моем приложении rails у меня есть форма, в которой пользователи могут выбрать категорию, а затем выбрать подкатегории. Я хочу, чтобы они отображались только в том случае, если пользователь выбрал конкретную категорию.

<%= form_with(model: product, local: true) do |form| %>
  <% if product.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(product.errors.count, "error") %> prohibited this product from being saved:</h2>

      <ul>
      <% product.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number">1</span> General Info</legend>
<%= form.text_field :name, id: :product_name, placeholder: "Add name of your product or service here" %>
<%= form.text_area :description, id: :product_description, placeholder: "Full Description" %>
<label for="job" style="color:#000;">Images:</label>
<%= form.file_field :image, id: :product_image %>
<%= form.file_field :imagetwo, id: :product_image %>
<%= form.file_field :imagethree, id: :product_image %>   
</fieldset>
<fieldset>
<legend><span class="number">2</span> Additional Info</legend>
<label for="job" style="color:#000;">Categories:</label>
    <%= form.select :category, ['Health Beauty & Babycare', 'Furniture & Homecare', 'Fashion', ' Grocery & Veg', 'Education', 'Business & Tax', 'Home Service & Repair', 'Personal Care'] %>


    <label for="job" style="color:#000;">Sub Categories:</label>
    <%= form.select :subcategory, ['Lips', 'Face', 'Nails', 'Kits', 'Tools',] %>
</fieldset>
<fieldset>
<legend><span class="number">3</span> Details</legend>
<%= form.text_field :price, id: :product_price, placeholder: "Price of your product/service (optional for services)" %>


</fieldset>
<div class="actions">
    <%= form.submit %>
  </div>
</form>
</div>
<% end %>

Answer 1

Для этого вам понадобится JavaScript.

Вот пример:

<%= form_with(model: product, local: true) do |form| %>

<fieldset>
<legend><span class="number">2</span> Additional Info</legend>
<label for="job" style="color:#000;">Categories:</label>
    <%= form.select :category, ['Health Beauty & Babycare', 'Furniture & Homecare', 'Fashion', ' Grocery & Veg', 'Education', 'Business & Tax', 'Home Service & Repair', 'Personal Care'] %>

    <div id="subcategory" class="hidden">
      <label for="job" style="color:#000;">Sub Categories:</label>
      <%= form.select :subcategory, ['Lips', 'Face', 'Nails', 'Kits', 'Tools'] %>
    </div>
</fieldset>

<script language="javascript">
  $('#product_category').change(function(event){
    if($('#product_category').val() === 'Health Beauty & Babycare') {
      $('#subcategory').removeClass('hidden');
    }
  });
</script>

• #product_category - это идентификатор, автоматически генерируемый rails при преобразовании файла erb в html, поэтому он может отличаться в вашем случае. (Просто проверьте в консоли)
• Не забудьте addClass('hidden'), если пользователь изменит свой первый выбор