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

Question

使用Wordpress插件高级自定义字段，我创建了一个页面来显示每个帖子的内容，因为页面非常重，并且依赖于数据库，我简化了代码以仅显示生成的html。

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

例如，如果我选择协会：'威尔士'，那么威尔士的所有内容都应该显示，如果我想要更具体的第二个下拉列表，只显示'威尔士'和'纪律选项3'，如果没有选择任何选项，那么所有的帖子显示。

因为有很多字段我很难尝试让它工作，我想要它做的是如果.bio-field-text中的文本匹配选择的选项然后所有的.card-parent div都被隐藏，只显示.card-parent divs有匹配选项。

我对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/[email protected]/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

在使用您的代码玩一点后，这是一个工作片段： （我只修改了JS，它很短。请参阅注释。）

$("#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/[email protected]/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

由于你在很多不在select下拉列表中的元素上有类.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/