WP AJAX post filter > do something with empty value

Unfortunately, the answers given did not work. I was only looking at the jQuery portion, but the issue was in the functions filter, which I did not include in my original post. However, you did push me in the direction I needed, so thank you for that!

The problem was, I was always getting a response from the AJAX function. A null response would not clear the previous responses, so my content drawer would never close after being open. What I ended up doing was modifying the function that returned the results by creating an empty template part. That way, the empty select input would return an empty div.

Here’s the full code, in case you were wondering:

FUNCTIONS.PHP ============

add_action('wp_ajax_repfilter', 'repfilter'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_repfilter', 'repfilter');
 
function repfilter() {
  $catSlug = $_POST['category'];

  $ajaxreps = new WP_Query([
    'post_type' => 'sales_reps',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'tax_query' => array(
        array (
            'taxonomy' => 'State',
            'field' => 'slug',
            'terms' => $catSlug,
        )
    ),
    'orderby' => 'title', 
    'order' => 'ASC',
  ]);
  $response="";

  if($catSlug == '') {  // This was the key! If the dropdown selection is empty, return this empty template file.
      $response .= get_template_part('template_parts/null-item');
  } else {
      if($ajaxreps->have_posts()) {
        while($ajaxreps->have_posts()) : $ajaxreps->the_post();
          $response .= get_template_part('template_parts/rep-item');
        endwhile;
      } else {
        $response="Sorry. There are no sales reps in your area.";
      }
  }

  echo $response;
  exit;
}

And the jQuery ==================

$(function(){
  var event_change = $('#event-change');
  $( ".select" ).selectCF({
    change: function(){
      var value = $(this).val();
      var text = $(this).children('option:selected').html();

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            dataType: 'html',
            data: {
              action: 'repfilter',
              category: $(this).children('option:selected').data('slug'),
            },
            success:function(res){
                $('#response').html(res);
                if($(".repItem").length == 0) { // And this little piece checks if the results have a div present, which it would not if the empty template file was returned, and removes the "open" class.
                    $('#response').removeClass('open');
                } else {
                    $('#response').addClass('open');
                }
            }
        });
    }
  });
})

So that fixed it. See the comments in the code samples. I’m sure it’s not a very elegant solution, but it worked.