過濾div有多個選擇，但只有在AND操作

Question

我想通過select元素過濾div，但只有例如當組AND字段有值時，不是OR。此時它會過濾包含組或字段選項中值的everthing。我怎樣才能使這個AND操作？

// select filter 
 
    var item = '.item'; 
 
    $('#tagselect, #groupselect').change(function() { 
 
    var result = $(this).map(function() { 
 
     return '.' + this.value; 
 
    }).get().join(); 
 
    $(item).hide().has(result).show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="form-control" id="tagselect"> 
 
    <option value="">group...</option> 
 
    <option value="group11">group 11</option> 
 
    <option value="group12">group 12</option> 
 
    <option value="group13">group 13</option> 
 
</select> 
 

 
<select class="form-control" id="tagselect"> 
 
    <option value="">Field...</option> 
 
    <option value="field1">field1</option> 
 
    <option value="field2">field2</option> 
 
    <option value="field3">field3</option> 
 
</select> 
 

 

 
<div class="item" style="display: block;"> 
 
<div class="item-inner"> 
 
<p class="field1"></p> 
 
<p class="field2">field 2</p> 
 
<p class="text">Lorem ipsum dolor sit amet</p> 
 
<p class="group13">group 13</p> 
 
</div> 
 
</div> 
 

 
<div class="item" style="display: block;"> 
 
<div class="item-inner"> 
 
<p class="field1">field 1</p> 
 
<p class="text">Lorem ipsum dolor sit amet</p> 
 
<p class="group12">group 12</p> 
 
<p class="group11">group 11</p> 
 
</div> 
 
</div> 
 

 
<div class="item" style="display: block;"> 
 
<div class="item-inner"> 
 
<p class="field1">field 1</p> 
 
<p class="field3">field 3</p> 
 
<p class="text">Lorem ipsum dolor sit amet</p> 
 
<p class="group11">group 11</p> 
 
</div> 
 
</div>

Answer 1

您需要同時獲得#tagselect和#groupselect每一次的值，並應用兩個過濾器。

如果其中一個篩選器未選中，請使用*（或者您可以將第一個選項更改爲value="*"，因此您無需在Javascript中執行此操作）。

// select filter 
 
    var item = '.item'; 
 
    $('#tagselect, #groupselect').change(function() { 
 
    var tag = $("#tagselect").val() ? "." + $("#tagselect").val() : "*"; 
 
    var group = $("#groupselect").val() ? "." + $("#groupselect").val() : "*"; 
 
    $(item).hide().has(tag).has(group).show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="form-control" id="groupselect"> 
 
    <option value="">group...</option> 
 
    <option value="group11">group 11</option> 
 
    <option value="group12">group 12</option> 
 
    <option value="group13">group 13</option> 
 
</select> 
 

 
<select class="form-control" id="tagselect"> 
 
    <option value="">Field...</option> 
 
    <option value="field1">field1</option> 
 
    <option value="field2">field2</option> 
 
    <option value="field3">field3</option> 
 
</select> 
 

 

 
<div class="item" style="display: block;"> 
 
<div class="item-inner"> 
 
<p class="field1"></p> 
 
<p class="field2">field 2</p> 
 
<p class="text">Lorem ipsum dolor sit amet</p> 
 
<p class="group13">group 13</p> 
 
</div> 
 
</div> 
 

 
<div class="item" style="display: block;"> 
 
<div class="item-inner"> 
 
<p class="field1">field 1</p> 
 
<p class="text">Lorem ipsum dolor sit amet</p> 
 
<p class="group12">group 12</p> 
 
<p class="group11">group 11</p> 
 
</div> 
 
</div> 
 

 
<div class="item" style="display: block;"> 
 
<div class="item-inner"> 
 
<p class="field1">field 1</p> 
 
<p class="field3">field 3</p> 
 
<p class="text">Lorem ipsum dolor sit amet</p> 
 
<p class="group11">group 11</p> 
 
</div> 
 
</div>