Блог

В моем приложении 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 amp; Babycare', 'Furniture amp; Homecare', 'Fashion', ' Grocery amp; Veg', 'Education', 'Business amp; Tax', 'Home Service amp; 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 %>
 

Для этого вам понадобится 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 amp; Babycare', 'Furniture amp; Homecare', 'Fashion', ' Grocery amp; Veg', 'Education', 'Business amp; Tax', 'Home Service amp; 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 amp; Babycare') {
      $('#subcategory').removeClass('hidden');
    }
  });
</script>
 

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