CODEWITHSUNDEEP
jquery
Rovi
Rovi

Reputation: 73

Filter div with multiple selections, but only on AND operation

I want to filter divs by select elements but only for example when group AND field have values, not OR. At the moment it filters everthing that contains the values in the group or field options. How can I make this an AND operation?

// 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>

Upvotes: 0

Views: 42

Answers (1)

Barmar
Barmar

Reputation: 782105

You need to get the values of both #tagselect and #groupselect every time, and apply both filters.

If one of the filters isn't selected, use * for that (or you could change the first option to value="*" so you don't need to do this in 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>

Upvotes: 1

Related Questions