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

当从字段集下拉列表中选择某个选项值时，我试图隐藏一个元素。我不确定如何使用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>

希望这是有道理的。以下是我对输入文本字段的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');
}

})

---

感谢阅读。

首先，您需要选择正确的组件，即下拉框：$'search\u filter\u type'。其次，您希望在更改下拉框的值时发生这种情况：$'search\u filter\u type'。在'change'上

$'search\u filter\u type'。关于'change'，函数{ var value=$this.find'option:selected'.text.toLowerCase； 如果值！=全部{ $'.pg_list'.eachfunction{ 如果$this.text.toLowerCase.indexOfvalue>-1{ $this.removeClass'displayNone'； }否则{ $this.addClass'displayNone'； } }; }否则{ $'.pg_list'.removeClass'displayNone'； } }; .displayNone{ 显示：无； } 按类型筛选 全部的 猫图片 狗图片 此文本包含一个狗图片

此文本包含一个猫图片

此文本包含一只兔子

---

在jQuery中，要读取a的值，它与：

您可以将其放入更改事件中，更改事件在更改时触发：

$('#my-select').on('change', function() {
    var value = $(this).val().toLowerCase();
    // rest of your code
});

如果需要选定选项的文本，可以使用以下选项：

$('#my-select').on('change', function() {
    var value = $(this).find('option:selected').text();
    // rest of your code
});

不过，对设计的一个小小改进是，为每个元素添加一个与选项值匹配的类。然后，不必循环，您可以使用“不”将其设置为除要保持可见的对象之外的所有对象

---

$'select'。在'change'上，函数{ var值=$this.val； $'divs.children//正确父级的所有子级 .removeClass'displayNone'//从它们中删除'displayNone' .not'.+value//删除我们没有隐藏的 .addClass'displayNone'；//将'displayNone'添加到所有剩余的 }; .displayNone{ 显示：无； } -挑选- 狗 猫 兔子 猫 狗 兔子

---

$'select'。在'change'上，函数{}您好Simon，谢谢，它正在工作，但是如果我将选项值设为Cat Pictures，它将不工作。这就像有一个空间它不能正常工作，没有空间它能正常工作一样？谢谢你，我会考虑做这个的better@Dware到底是什么不起作用？我提供的代码片段是否按照您希望的方式工作？嗨，sorayadragon，对不起，要澄清，请参阅我上面发给simon的帖子。基本上，如果文本包含空格，它似乎不起作用，但如果没有空格，它就起作用。奇怪的是，不知道为什么会发生这种情况？@Dware因此，如果更改的value属性，它将不起作用，因为pg_list div中的示例文本不包含猫图片。如果您更改了选项的实际文本，此解决方案仍然有效。好吧，看来您是对的，网站正在为选项值的空格生成破折号，但文本显然没有破折号。该死，太近了。有什么方法可以忽略破折号吗？或者，我可以让它读取选项文本而不是值吗？@Dware我更新了解决方案以查看选项中的文本而不是值。

$('#my-select').val(); // where this is your select

$('#my-select').on('change', function() {
    var value = $(this).val().toLowerCase();
    // rest of your code
});

$('#my-select').on('change', function() {
    var value = $(this).find('option:selected').text();
    // rest of your code
});