jQuery如何通过下拉列表过滤内容

Question

使用 Wordpress 插件 Advanced Custom Fields，我创建了一个页面来显示每个帖子的内容，因为该页面非常 PHP 并且依赖于数据库，我简化了代码以仅显示生成的 html。

在我的页面上，我有两个下拉列表，一个用于“协会”和“纪律”类别，在选择下拉列表时，我希望显示与协会和/或学科匹配的帖子。

例如，如果我选择 Association: 'Wales'，则应显示所有带有 Wales 的内容，如果我想在第二个下拉列表中更具体，则仅显示 'Wales' 和 'Discipline Option 3' 如果两个选项都没有选择然后显示所有帖子。

因为有这么多字段我很难让它工作，我想要它做的是如果.bio-field-text 中的文本与选择的选项匹配，那么所有.card-parent div 都是隐藏，仅显示具有匹配选项的.card-parent div。

我对jQuery的经验非常有限，所以我一直在寻找类似的问题并尝试他们的解决方案，但无济于事。

这是一个 JSFiddle 链接：https://jsfiddle.net/sjwmzk84/1/

任何帮助将不胜感激。

$(document).ready(function() {
  $("#association").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".bio-field-text").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".bio-field-text").hide();
      }
    });
  }).change();
});

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 67.5em;
  *zoom: 1;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.row.collapse .column,
.row.collapse .columns {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  float: left;
}

.row .row {
  width: auto;
  margin-left: -0.9375em;
  margin-right: -0.9375em;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
  *zoom: 1;
}

.row .row:before,
.row .row:after {
  content: " ";
  display: table;
}

.row .row:after {
  clear: both;
}

.row .row.collapse {
  width: auto;
  margin: 0;
  max-width: none;
  *zoom: 1;
}

.row .row.collapse:before,
.row .row.collapse:after {
  content: " ";
  display: table;
}

.row .row.collapse:after {
  clear: both;
}

.column,
.columns {
  position: relative;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  width: 100%;
  float: left;
}

@media only screen {
  .column,
  .columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left;
  }
  .small-5 {
    position: relative;
    width: 41.66667%;
  }
  .small-7 {
    position: relative;
    width: 58.33333%;
  }
  .small-12 {
    position: relative;
    width: 100%;
  }
  [class*="column"]+[class*="column"]:last-child {
    float: right;
  }
  [class*="column"]+[class*="column"].end {
    float: left;
  }
}


/* Styles for screens that are atleast 768px; */

<link href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="categoryfilter" id="association" data-tableId="card-parent">
  <option>Association</option>
  <option>Kent</option>
  <option>Wales</option>
  <option>Stafford</option>
</select>

<select name="categoryfilter" id="discipline" data-tableId="card-parent">>
  <option>Discipline</option>
  <option>Discipline Choice 1</option>
  <option>Discipline Choice 2</option>
  <option>Discipline Choice 3</option>
</select>

<div class="card-parent">
  <h1 class="bio-card-title">
    John &amp; Peanuts </h1>

  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Peanuts </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Pitbull </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          10 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          John </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Stafford </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 1 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

<div class="card-parent">
  <h1 class="bio-card-title">
    Alex &amp; Ben </h1>
  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Ben </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Labrador </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          12 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Alex </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Kent </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 2 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

<div class="card-parent">
  <h1 class="bio-card-title">
    Kyle &amp; Nougat </h1>
  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Nougat </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Hound </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          7 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Kyle </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Wales </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 3 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

Answer 1

在对您的代码进行了一些操作之后，这里是一个有效的 sn-p：
（我只修改了js，比较短，见cmets）

$("#association, #discipline").change(function() {
  var associationOpt = $("#association").find("option:selected").text(); // Gets selected value for association
  var disciplineOpt = $("#discipline").find("option:selected").text(); // Gets selected value for discipline
  $(".card-parent").show(); // Shows all cards
  $(".card-parent").each(function(index) { // Then, for each card…
    if (!($(this).text().includes(associationOpt) && $(this).text().includes(disciplineOpt))) {
      $(this).hide(); // … hides if one of the selected options isn't found
    }
  });
});

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 67.5em;
  *zoom: 1;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.row.collapse .column,
.row.collapse .columns {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  float: left;
}

.row .row {
  width: auto;
  margin-left: -0.9375em;
  margin-right: -0.9375em;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
  *zoom: 1;
}

.row .row:before,
.row .row:after {
  content: " ";
  display: table;
}

.row .row:after {
  clear: both;
}

.row .row.collapse {
  width: auto;
  margin: 0;
  max-width: none;
  *zoom: 1;
}

.row .row.collapse:before,
.row .row.collapse:after {
  content: " ";
  display: table;
}

.row .row.collapse:after {
  clear: both;
}

.column,
.columns {
  position: relative;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  width: 100%;
  float: left;
}

@media only screen {
  .column,
  .columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left;
  }
  .small-5 {
    position: relative;
    width: 41.66667%;
  }
  .small-7 {
    position: relative;
    width: 58.33333%;
  }
  .small-12 {
    position: relative;
    width: 100%;
  }
  [class*="column"]+[class*="column"]:last-child {
    float: right;
  }
  [class*="column"]+[class*="column"].end {
    float: left;
  }
}


/* Styles for screens that are atleast 768px; */

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoryfilter" id="association" data-tableId="card-parent">
  <option>Association</option>
  <option>Kent</option>
  <option>Wales</option>
  <option>Stafford</option>
</select>

<select name="categoryfilter" id="discipline" data-tableId="card-parent">>
  <option>Discipline</option>
  <option>Discipline Choice 1</option>
  <option>Discipline Choice 2</option>
  <option>Discipline Choice 3</option>
</select>

<div class="card-parent">
  <h1 class="bio-card-title">
    John &amp; Peanuts </h1>

  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Peanuts </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Pitbull </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          10 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          John </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Stafford </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 1 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

<div class="card-parent">
  <h1 class="bio-card-title">
    Alex &amp; Ben </h1>
  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Ben </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Labrador </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          12 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Alex </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Kent </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 2 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

<div class="card-parent">
  <h1 class="bio-card-title">
    Kyle &amp; Nougat </h1>
  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Nougat </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Hound </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          7 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Kyle </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Wales </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 3 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

希望对你有帮助。

Answer 2

由于您在许多不在选择下拉列表中的元素上都有 .bio-field-text 类，如果您不向潜在匹配的元素添加类，这将是相当困难的。为简单起见，我添加了一个名为.option 的类，并去掉了<p> 标记中的空白。

HTML

<select name="categoryfilter" id="association" data-tableId="card-parent">
  <option>Association</option>
  <option>Kent</option>
  <option>Wales</option>
  <option>Stafford</option>
</select>

<select name="categoryfilter" id="discipline" data-tableId="card-parent">>
  <option>Discipline</option>
  <option>Discipline Choice 1</option>
  <option>Discipline Choice 2</option>
  <option>Discipline Choice 3</option>
</select>

<div class="card-parent">
  <h1 class="bio-card-title">
    John &amp; Peanuts </h1>

  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Peanuts </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Pitbull </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          10 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          John </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text select">Stafford</p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 1 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

<div class="card-parent">
  <h1 class="bio-card-title">
   Alex &amp; Ben </h1>
  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Ben </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Labrador </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          12 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Alex </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text select">Kent</p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 2 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

<div class="card-parent">
  <h1 class="bio-card-title">
    Kyle &amp; Nougat </h1>
  <div class="small-12 column biography-card-text">
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's name: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Nougat </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Breed: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Hound </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Dog's age: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          7 </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Handler: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Kyle </p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Association: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text select">Wales</p>
      </div>
    </div>
    <div class="row bio-card-row">
      <div class="small-5 column">
        <p class="bio-field-title">
          Discipline: </p>
      </div>
      <div class="small-7 column">
        <p class="bio-field-text">
          Discipline Choice 3 </p>
      </div>
    </div>
    <div class="column bio-card-btm-content">
      <p>Example text</p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>

您还想确保 jQuery 正常工作。小提琴没有打开它。然后你可以这样做：

$(document).ready(function(){
  $("#association").on('change', function (){

    var optionValue = $(this).find("option:selected").text();

    $(".select").each(function(){
      if ($(this).text() !== optionValue){
        $(this).parents('.card-parent').hide();
      }
      else {
        $(this).parents('.card-parent').show();
      }
    })
  });
});

https://jsfiddle.net/sjwmzk84/3/