Jquery Dropdown filter

When I choose filter by country, it does not work.Below this is my code. i need to filter articles based on drop down selection.i tried with below script i cannot get result Please help to solve this filter.if any other some possible method also i need,java script method also need.and also if i click all countries means all data should be visible.

<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()
             }
        })
     });
     });

There is multiple problem in your code, 1 being that data does not represent the span existing in each ctr.

Try this:

$(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>