Question

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

我希望用户从此

中选择一个类别

<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＆amp; #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");
});

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

注意 - 字段被视为＆＃34;禁用＆＃34;如果它具有属性＆＃34;禁用＆＃34;。属性的值不需要设置为＆＃34;禁用＆＃34; - 事实上没有任何区别。我只想将值设置为禁用，因为它非常明显。

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

1 个答案: