时间戳

首页 > 解决方案 > jQuery如何通过下拉列表过滤内容

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

问题描述

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

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

例如，如果我选择 Association: 'Wales'，则应显示威尔士的所有内容，如果我想在第二个下拉列表中更具体，则仅显示 'Wales' 和 'Discipline Option 3'，如果两个选项均未选择，则全部的帖子显示。

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

我对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>

标签： jqueryhtmlwordpress

解决方案

在玩了一点代码之后，这是一个工作片段：（
我只修改了 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/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>

希望能帮助到你。

推荐阅读