Question

下拉

我几周时间学习rails，react和js。如果我的问题或答案真的很容易，我会提前道歉。我想使用下拉过滤条过滤页面。我提供了图像。我在下面提供了我的代码。此代码在rails应用程序中。提前谢谢！

<div class="row data-query">
<div class="col-xs-3 filterby">Filter By</div>
  <div class="col-xs-3 filter">
    <ul class="filter-dropdown pull-left">
      <li class="dropdown" value="all">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Condition <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" id="FilterContainer">
          <li><a href="#">Like New</a></li>
          <li><a href="#">Good Condition</a></li>
          <li><a href="#">Fair Condition</a></li>
          <li class="divider"></li>
          <li class="divider"></li>
          <li><%= link_to "", toys_path %></li>

        </ul>
      </li>
    </ul>
  </div>
  <div class="col-xs-3 filter">
    <ul class="filter-dropdown pull-left">
      <li class="dropdown" value="all">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Age Group <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" id="FilterContainer">
          <li><a href="#">0-1yr</a></li>
          <li><a href="#">1-2yrs</a></li>
          <li><a href="#">2-4yrs</a></li>
          <li><a href="#">4-8yrs</a></li>
          <li><%= link_to "", toys_path %></li>
        </ul>
      </li>
    </ul>
</div>
  <div class="col-xs-3 filter">
    <ul class="filter-dropdown pull-left">
      <li class="dropdown" value="all">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Category <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" id="FilterContainer">
          <li><a href="#">Activity & Learning</a></li>
          <li><a href="#">Arts & Crafts</a></li>
          <li><a href="#">Baby Toys</a></li>
          <li><a href="#">Dolls</a></li>
          <li><%= link_to "", toys_path %></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
$('select').change(function () {
var current = this.value;

if (current == 'all') {
    $('#FilterContainer').find('li.all').show();
} else {

    $('#FilterContainer').find('li').hide();
    $('#FilterContainer').find('li.all.' + current).show();
}

return false;

}）;

Answer 1

在Ransack gem的帮助下，在Rails中很容易做到这种搜索。 https://github.com/activerecord-hackery/ransack

在您的视图中，您将拥有类似的内容，具体取决于您的型号：

<%= search_form_for @search do |f| %>
    <div>
        <%= f.label :condition %>
        <%= f.collection_select :condition, Condition.all, :id, :name, {include_blank: "All Conditions"} %>
    </div>
    <div>
        <%= f.submit "Search" %>
    </div>
<% end %>

通过下拉过滤器逐页过滤

1 个答案: