javascript - 根据其他类中的选定字段将 displayNone 应用于特定类

Question

当从字段集下拉列表中选择某个选项值时，我试图隐藏一个元素。我不确定如何使用 jQuery 读取选项值中包含的文本(实际文本或值都可以):

<div class="filter_options">
            <input id="search_query" type="hidden" value="Texts" />
            <fieldset class="filterType">

                <label>Filter By Type</label><select id="search_filter_type">

<option value="">All</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option></select></fieldset>

        </div>

然后隐藏某些不包含所选值的div类“pg_list”。

            <div class="pg_list">
             <p>This text contains a Dog</p>
            </div>

            <div class="pg_list">
             <p>This text contains a Cat</p>
            </div>

            <div class="pg_list">
             <p>This text contains a Rabbit</p>
            </div>

所以如果我选择选项值 - Cat，那么它会隐藏包含 Dog 或 Rabbit 的 div，并保留 Cat。

最后，我准备好了以下 .css:

.displayNone{
display: none;
}

希望这是有道理的。这是我的输入文本字段的 jQuery，它可以工作，但我不知道如何使用相同的基础来处理选定的下拉列表:

$('input').on('keypress keyup', function(){
var value = $(this).val().toLowerCase();
if (value != '') {

  $('.pg_list').each(function () {
    if ($(this).text().toLowerCase().indexOf(value) > -1) {
      $(this).removeClass('displayNone');  
    } else {
      $(this).addClass('displayNone');
    }
  });
} else {
  $('.pg_list').removeClass('displayNone');
}

});

感谢阅读。

Answer 1

首先，您需要选择正确的组件，即下拉框:$('#search_filter_type')。其次，您希望在更改下拉框的值时发生这种情况:$('#search_filter_type').on('change', ...

$('#search_filter_type').on('change', function() {
  var value = $(this).find('option:selected').text().toLowerCase();
  if (value != "all") {

    $('.pg_list').each(function() {
      if ($(this).text().toLowerCase().indexOf(value) > -1) {
        $(this).removeClass('displayNone');
      } else {
        $(this).addClass('displayNone');
      }
    });
  } else {
    $('.pg_list').removeClass('displayNone');
  }
});

.displayNone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter_options">
  <input id="search_query" type="hidden" value="Texts" />
  <fieldset class="filterType">

    <label>Filter By Type</label>
    <select id="search_filter_type">

      <option value="">All</option>
      <option value="Cats">Cat Pictures</option>
      <option value="Dogs">Dog Pictures</option>
    </select>
  </fieldset>

</div>
<div class="pg_list">
  <p>This text contains a Dog Pictures</p>
</div>

<div class="pg_list">
  <p>This text contains a Cat Pictures</p>
</div>

<div class="pg_list">
  <p>This text contains a Rabbit</p>
</div>