Javascript 隐藏不包含“选择框”值的内容

我有一个页面，我想用一个选择框按国家过滤显示的内容。页面最初显示所有内容，但当选择一个国家时，所有与该值不匹配的内容都将通过添加CSS类隐藏

这是我迄今为止的相关代码：

HTML:

JavaScript:

我在jQuery/JavaScript方面没有什么经验，但我已经调查过了，认为我需要循环使用所有匹配的内容块，每次使用find查找相关内容，但我知道的还不够多，无法让它正常工作。我的代码目前没有任何作用

---

任何帮助都将不胜感激。

您的最佳选择是使用自定义数据-*属性区分国家：

<div class="media" data-country="UK">
    <p>blah blah blah UK blah blah</p>
</div>

你想要这个吗：

$('#filter').change(function () {
   var country = $('#filter').val();
   $('.media').hide();
   $('.media:contains('+ country.toLowerCase() +')').show();
});

或：

尝试：

---

通常情况下，过滤是基于分区或类以及其中的文本进行的，而不仅仅是文本…但由于每个问题都有解决方案， 这是你的

$'filter'.changefunction{ var country=$this.val.toLowerCase； var元素=[]； $'.media'.eachfunction{ 如果$this.text.indexOfcountry==-1 { $this.hide； } 其他的 { $this.show； } }; };

---

注意。

您是否打算搜索元素的文本内容以查找国家名称？如果是这样，这似乎不是最好的解决方案。如果英文段落是“在英国，货币是英镑，而在德国，货币是欧元”，并且用户从下拉列表中选择德国，该怎么办？每个框基本上都是一个概况，包含照片、年龄、居住国和以前的国家。例如，不仅要搜索居住在法国的人，还要搜索以前去过法国的人。我认为搜索整个.media div将是这里的最佳选择。我认为不需要循环。这是最简单的代码，虽然所有代码都有效，谢谢，这是我实现的方法。谢谢

$('#filter').change(function () {
    var country = $('#filter').val();
    $('.media').each(function () {
        if ($('.media').find(country)) {

        } else {
            $('.media').addClass('hidden');
        }
    })
});

<div class="media" data-country="UK">
    <p>blah blah blah UK blah blah</p>
</div>

$('#filter').change(function () {
    var country = this.value;
    $(".media").addClass("hidden");
    $(".media [data-country=" + country + "]").addClass("show");
});

$('#filter').change(function () {
   var country = $('#filter').val();
   $('.media').hide();
   $('.media:contains('+ country.toLowerCase() +')').show();
});

$('#filter').change(function () {
   var country = $('#filter').val();
   $('.media').addClass('hidden');
   $('.media:contains(' + country.toLowerCase() + ')').removeClass('hidden');
});

$('#filter').change(function () {
    var country = $('#filter').val().toLowerCase();
    $('.media').each(function () {
        if ($(':contains(' + country + ')', this).length) {
            $(this).removeClass('hidden');
        } else {
            $(this).addClass('hidden');
        }
    })
});