动态菜单、Ajax、Ruby

Question

大家好，这里是菜鸟，

我的应用程序具有类别和子类别的动态下拉菜单。选择类别时，相应的子类别将更改并显示类别的子类别 - 我已设置。但我想要完成的是隐藏子类别菜单，直到选择一个类别。

我用于菜单的代码：

StaticPage Controller

          def update_subcategories
            # updates categories and subcategories based on product type selected
            category = Category.find(params[:category_id])
            # map to name and id for use in our options_for_select
            @subcategories = category.subcategories.map{|a| [a.name, a.id]}.insert(0, "Select a Product")
          end

查看静态页面>首页

    <div class="form-group">
      <%= f.label 'Choose a Product:' %>
      <%= f.collection_select :category_id,  @categories,  :id, :name, {:prompt   => "Select a Category"}, {:id => 'categories_select'} %>
    </div>
    <div class="form-group">
      <%= f.label 'Choose a brand:' %>
      <%= f.collection_select :subcategory_id, @subcategories, :id, :name, {:prompt   => "Select an Product"}, {:id => 'subcategories_select'} %>
    </div>


<script>
  $(document).ready(function() {
    var categories = '#categories_select';
    var subcategories = '#subcategories';


    $('#categories_select').change(function() {
      $.ajax({
        url: "<%= update_subcategories_path %>",
        data: {
          category_id : $('#categories_select').val()
        },
        dataType: "script"
      });
    });
  });
</script>

查看静态页面>update_subcategories.js.erb

$('#subcategories_select').html("<%= escape_javascript(options_for_select(@subcategories)) %>");

提前致谢！

---

更新

---

使用@PAVAN 建议。然而，下拉子类别菜单似乎中断： 子猫的图像。菜单

Answer 1

试试下面的

<script>
  $(document).ready(function() {
  $('#subcategories_select').hide();

    $('#categories_select').change(function() {
      $('#subcategories_select').show();
      $.ajax({
        url: "<%= update_subcategories_path %>",
        data: {
          category_id : $('#categories_select').val()
        },
        dataType: "script"
      });
    });
  });
</script>

你不需要这些行 var categories = '#categories_select'; var subcategories = '#subcategories';

并且还提供 id subcategories_select 到 sub_categories div 而不是 sub_categories collection_select 否则你会结束显示标签选择一个品牌：，然后再更改产品collection_select。

<div class="form-group", id="subcategories_select">
  <%= f.label 'Choose a brand:' %>
  <%= f.collection_select :subcategory_id, @subcategories, :id, :name, {:prompt => "Select an Product"} %>
</div>