Jquery下拉过滤器

Question

当我按国家选择过滤器时，它不是work.Below --这是我的代码。我需要基于下拉选择过滤文章。我尝试了用下面的脚本我无法得到结果，请帮助解决这个filter.if任何其他一些可能的方法我也需要，java脚本方法也need.and也如果我点击所有国家意味着所有的数据应该是可见的。

<div class="searched-articles" style="border:1px solid #000;">
   <a href="#/testing-2/">
      <div class="col-md-2 col-sm-2 float-left author-date">
         <span class="date">03-01-2022</span>   
      </div>
      <div class="col-md-6 col-sm-6 float-left heading">
         <h4>Testing</h4>
         <span class="global" data-type="India">India</span>        
      </div>
   </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
   <a href="#/test3-2/">
      <div class="col-md-2 col-sm-2 float-left author-date">
         <span class="date">29-12-2021</span>   
      </div>
      <div class="col-md-6 col-sm-6 float-left heading">
         <h4>BlazeDream Test3</h4>
         <span class="global" data-type="India">India</span>        
      </div>
   </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
   <a href="#/2/">
      <div class="col-md-2 col-sm-2 float-left author-date">
         <span class="date">29-12-2021</span>   
      </div>
      <div class="col-md-6 col-sm-6 float-left heading">
         <h4>BlazeDreamTest2</h4>
         <span class="global" data-type="America">America</span>        
      </div>
   </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
   <a href="#/news2/">
      <div class="col-md-2 col-sm-2 float-left author-date">
         <span class="date">30-11-2021</span>   
      </div>
      <div class="col-md-6 col-sm-6 float-left heading">
         <h4>News2</h4>
         <span class="global" data-type="America">America</span>
      </div>
   </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
   <a href="#/test3/">
      <div class="col-md-2 col-sm-2 float-left author-date">
         <span class="date">27-11-2021</span>   
      </div>
      <div class="col-md-6 col-sm-6 float-left heading">
         <h4>test3</h4>
         <span class="global" data-type="India">India</span>        
      </div>
   </a>
</div><br>
<div>
  <select class="mdl-selectfield__select" id="countries" name="countries">
    <option value="All Countries">All Countries</option>    
    <option value="India">India</option>
    <option value="America">America</option>    
  </select>
</div>

$(document).ready(function(){
    $("#countries").change(function() {
    var filter = $("#countries").val().toLowerCase();
    var ctr = $(".searched-articles"); 
    var ctr1 = $(".searched-articles").text(); 
    var data = $(".heading span").attr('data-type').toLowerCase();
    
        ctr.each(function(i) {
             if( data == filter) {
                 ctr.show();
             } else{
                ctr.hide()
             }
        })
     });
     });

Answer 1

代码中存在多个问题，1是数据不代表每个ctr中存在的跨度。

试试这个：

$(document).ready(function() {
  $("#countries").change(function() {
    var filter = $("#countries").val().toLowerCase();
    $(".searched-articles").hide();
    $(".searched-articles").filter(function() {
      return $(this).find(".global").attr("data-type").toLowerCase() == filter;
    }).show();
  });
});

Demo

​

$(document).ready(function() {
  $("#countries").change(function() {
    var filter = $("#countries").val().toLowerCase();
    $(".searched-articles").hide();
    $(".searched-articles").filter(function() {
      return $(this).find(".global").attr("data-type").toLowerCase() == filter;
    }).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searched-articles" style="border:1px solid #000;">
  <a href="#/testing-2/">
    <div class="col-md-2 col-sm-2 float-left author-date">
      <span class="date">03-01-2022</span>
    </div>
    <div class="col-md-6 col-sm-6 float-left heading">
      <h4>Testing</h4>
      <span class="global" data-type="India">India</span>
    </div>
  </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
  <a href="#/test3-2/">
    <div class="col-md-2 col-sm-2 float-left author-date">
      <span class="date">29-12-2021</span>
    </div>
    <div class="col-md-6 col-sm-6 float-left heading">
      <h4>BlazeDream Test3</h4>
      <span class="global" data-type="India">India</span>
    </div>
  </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
  <a href="#/2/">
    <div class="col-md-2 col-sm-2 float-left author-date">
      <span class="date">29-12-2021</span>
    </div>
    <div class="col-md-6 col-sm-6 float-left heading">
      <h4>BlazeDreamTest2</h4>
      <span class="global" data-type="America">America</span>
    </div>
  </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
  <a href="#/news2/">
    <div class="col-md-2 col-sm-2 float-left author-date">
      <span class="date">30-11-2021</span>
    </div>
    <div class="col-md-6 col-sm-6 float-left heading">
      <h4>News2</h4>
      <span class="global" data-type="America">America</span>
    </div>
  </a>
</div><br>
<div class="searched-articles" style="border:1px solid #000;">
  <a href="#/test3/">
    <div class="col-md-2 col-sm-2 float-left author-date">
      <span class="date">27-11-2021</span>
    </div>
    <div class="col-md-6 col-sm-6 float-left heading">
      <h4>test3</h4>
      <span class="global" data-type="India">India</span>
    </div>
  </a>
</div><br>
<div>
  <select class="mdl-selectfield__select" id="countries" name="countries">
    <option value="All Countries">All Countries</option>
    <option value="India">India</option>
    <option value="America">America</option>
  </select>
</div>

​