如何获取 id 并根据 ror 中的 id 显示下一个字段？

Question

我正在使用 rails4。我想根据表单中选择的类别显示子类别列表。我已经完成了 java-script，但我认为它不是一个好的解决方案。请建议我该怎么做？

我希望用户从中选择一个类别

<div class="field">
    <%= f.label :Category %><br>
    <%= f.collection_select :category_id, Category.all, :id, :name, { :prompt => true, :selected => @product.category_id } %>
</div>  

之后，下一个字段将根据用户选择进行更新。目前我已经隐藏了这些#women_category & #men_category

<div class="field" id="women_category">
  <%= f.label :sub_category %><br>
  <%= f.collection_select  :sub_category_id, @first_category.sub_categories.all,:id ,:name%>
</div>
<div class="field" id="men_category">
  <%= f.label :sub_category %><br>
  <%= f.collection_select  :sub_category_id, @second_category.sub_categories.all,:id ,:name%>
</div>

现在当用户选择 category_id=1 时，我会显示 #women_category，如果用户选择 category_id =2，则会在 javascript 的帮助下显示 #men_category

$("select[name='product[category_id]']").change(function(){  
  if(this.value == '1'){
    $("#women_category").show();
    $("#men_category").hide();
  }else if(this.value == '2'){
    $("#women_category").hide();
    $("#men_category").show();
  }
});

如果我的类别列表增加，它会很复杂，所以我可以在没有这么多复杂的情况下编写代码吗？请帮忙。

Answer 1

在控制器中

@categories = Category.include(:sub_categories).all

在视图中

<div class="field">
  <%= f.label :Category %><br>
  <%= f.collection_select :category_id, @categories, :id, :name, { :prompt => true, :selected => @product.category_id } %>
</div>  

<div id="subcategory-selects">
  <% @categories.each do |category| %>
    <div class="field sub-category-select" data-category-id="<%= category.id %>" style="display:none;" disabled="disabled">
      <%= f.label :sub_category %><br>
      <%= f.collection_select  :sub_category_id, category.sub_categories,:id ,:name %>
    </div>
  <% end %>
</div>

javascript

$("select[name='product[category_id]']").change(function(){  
  //get the subcat select with this category id, show and undisable it, and hide and disable its siblings
  $(".sub-category-select[data-category-id="+$(this).val()+"]").show().removeAttr("disabled").siblings().hide().attr("disabled", "disabled");
});

我禁用/取消禁用子类别选择以及隐藏/显示它们的原因是，即使它们被隐藏，它们仍然会在提交表单时对参数有所贡献。因为它们都具有相同的 name 属性，所以最后一个将有效地覆盖其他的。另一方面，禁用的输入不会影响参数，因此只有可见和未禁用的输入才会真正影响参数。

注意 - 如果字段具有“已禁用”属性，则该字段被视为“已禁用”。该属性的值不需要设置为“禁用” - 实际上没有区别。我只是想将该值设置为禁用，因为它非常明显。