javascript jquery 多个下拉过滤器菜单

jquery multiple dropdown filter menu

提问by bryan151

I have pictures hiding and showing based on a multiple dropdown menu selection. I am trying to have the 2 and possible more dropdown menus working together to refine a search.

我根据多个下拉菜单选择隐藏和显示图片。我正在尝试让 2 个和可能更多的下拉菜单协同工作以优化搜索。

If I select an item in the first dropdown, I would like to apply the second filter and so on with any additional dropdown.

如果我在第一个下拉列表中选择一个项目，我想应用第二个过滤器等任何其他下拉列表。

I need some help with the jquery. My current problem is the 2nd filter never kicks in. It gets overwritten and resets the filter. If possible, I would like to add a 3rd filter to narrow the search even more to find exactly what I am looking for. Here is some sample code..

我需要一些有关 jquery 的帮助。我目前的问题是第二个过滤器永远不会启动。它会被覆盖并重置过滤器。如果可能，我想添加第三个过滤器以进一步缩小搜索范围，以准确找到我正在寻找的内容。这是一些示例代码..

$('select').change(function(){
var current = $(this).attr('value');

if(current == 'all'){
    $('#FilterContainer').children('div.all').show();
} 

else {

    $('#FilterContainer').children('div:not(.' + current + ')').hide();
$('#FilterContainer').children('div.' + current).show();
 }

  return false;
})

HTML

HTML

  <p>Filter: </p>
        <select class="filterby">
        <option value="all"><h5>Show All</h5></option>
        <option value="1"><h5>One</h5></option>
        <option value="2"><h5>Two</h5></option>
        <option value="3"><h5>Three</h5></option>
      </select>



      <p>Location: </p>
        <select class="filterby">
        <option value="all"><h5>All Locations</h5></option>
        <option value="nj"><h5>NJ</h5></option>
        <option value="ny"><h5>NY</h5></option>
        <option value="pa"><h5>PA</h5></option>
      </select>


  <div id="FilterContainer">

  <div class="all 1 nj">Test One NJ</div>
  <div class="all 1 ny">Test One NY</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 2 nj">Test Two NJ</div>
  <div class="all 2 ny">Test Two NY</div>
  <div class="all 2 pa">Test Two PA</div>
  <div class="all 3 nj">Test Three NJ</div>
  <div class="all 3 ny">Test Three NY</div>
  <div class="all 3 pa">Test Three PA</div>
  <div class="all 1 nj">Test One NJ</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 1 pa">Test One PA</div>
  <div class="all 2 nj">Test Two NJ</div>
  <div class="all 2 ny">Test Two NY</div>
  <div class="all 2 ny">Test Two NY</div>

回答by brainless coder

Try this -

试试这个 -

$("select.filterby").change(function(){
    var filters = $.map($("select.filterby").toArray(), function(e){
        return $(e).val();
    }).join(".");
    $("div#FilterContainer").find("div").hide();
    $("div#FilterContainer").find("div." + filters).show();
});

with LIVE DEMO

与现场演示

回答by Jai

Try this:

试试这个：

$('select').change(function () {
  var current = this.value; // <------get the value this way.
   if (current == 'all') {
      $('#FilterContainer').find('div.all').show();
   } else {
      $('#FilterContainer').find('div').hide();
      $('#FilterContainer').find('div.all.' + current).show();
   }
   return false;
});

Fiddle

小提琴

回答by Sablefoste

To make it work as you requested you could try the following code:

要使其按照您的要求工作，您可以尝试以下代码：

$('select').change(function () {
    var current = this.value;
    $.each($('#FilterContainer').find('div.all').not('.hidden').not('.'+current), function(){
        $(this).addClass('hidden');
    });
    $.each($('.'+current), function () {
        $(this).removeClass('hidden');
    });
});

And adding the CSS:

并添加 CSS：

.hidden{
    display:none;
}

Gives you this working fiddle: http://jsfiddle.net/Q5DpP/5/

给你这个工作小提琴：http: //jsfiddle.net/Q5DpP/5/

HOWEVER:

然而：

I don't think this is exactly where you will want to go. Please play with it, and you will understand. If you change the top filter, then the bottom filter everything is okay. But if you then change the top filter again, it will continue to hide... basically, once something is hidden it won't come back. This then becomes a logic puzzle, and the structure of your testing needs to be modified. It only becomes more complex as you go levels deeper.

我不认为这正是你想去的地方。请玩它，你就会明白。如果您更改顶部过滤器，那么底部过滤器一切正常。但是，如果您再次更改顶部过滤器，它将继续隐藏......基本上，一旦隐藏了某些东西，它就不会回来。这就变成了一个逻辑难题，需要修改测试的结构。随着您进入更深层次，它只会变得更加复杂。

You may wish to consider adding/removing different classes at each filter level, and then checking on only these filters.

您可能希望考虑在每个过滤器级别添加/删除不同的类，然后仅检查这些过滤器。