动态菜单，Ajax，Ruby

Question

大家好，这里是菜鸟，

我的应用程序有类别和子类别的动态下拉菜单。 When a category is selected the corresponding subcategory will change and display the category's subcategories - I have that set.但我想完成的是隐藏子类别菜单，直到选择了一个类别。

我用于菜单的代码：

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';

同时提供idsubcategories_select给sub_categoriesdiv 而不是 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>

动态菜单，Ajax，Ruby

Dynamic Menu, Ajax, Ruby

ajax

jquery

ruby-on-rails

drop-down-menu