Display WordPress search results based on the selected Sub-Category

I’m trying to create a search using dropdowns in WordPress.

I’ve got two dropdowns, 1 – Parent Category and 1 – Sub-category.

The Sub-category will show automatically based on the selected Parent category.

My goal is to have the 2 dropdowns with a submit button and have it act as a search, displaying the selected sub-category’s posts on the results page.

I’ve got this far using research but I’m completely lost and struggling as you can see.
Below is my functions.php code and HTML that’s used for the search:

// FUNCTIONS.PHP

// Drop-down Ajax call

add_action('wp_ajax_my_special_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
function my_action_callback() {
    if(isset($_POST['main_catid'])) {
        $categories = get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
        foreach ($categories as $cat) {
            $option .= '<option value="'.$cat->term_id.'">';
            $option .= $cat->cat_name;
            $option .= ' ('.$cat->category_count.')';
            $option .= '</option>';
        }
        echo '<option value="-1" selected="selected">Search...</option>'.$option;
        die();
    } // end if
}



// Define search for sub-category
function search_filter( $query ) {
    // only modify your custom search query.
    if ( $query->is_search &&  $_post['my_search'] == "c_search") {
        $args = array(
                'relation' => 'AND',
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => array( $_post['main_cat']),
                'operator' => 'IN'
            ),
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => array( $_post['sub_cat']),
                'operator' => 'IN'
            )
        );
        $query->set( 'tax_query', $args);
    }
    return $query;
}

// The hook needed to search_filter
add_filter( 'the_search_query','search_filter');

 <!-- BODY HTML CODE -->
<div id="content">

<!-- Search form-->
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  <div>
    <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    <?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>
    <select name="sub_cat" id="sub_cat" enabled="disabled"></select>
    <input type="hidden" id="my_search" name="my_search" value="c_search" />
    <input type="submit" id="searchsubmit" value="search" />
  </div>
</form>


<!-- Dropdown Ajax call script -->
<script type="text/javascript">
    jQuery(function() {
      jQuery('#main_cat').change(function() {
        var $mainCat = jQuery('#main_cat').val();

        // call ajax
        jQuery("#sub_cat").empty();
        jQuery.ajax({
          url: "https://testdev.co.za/test/macadams_new/wp-admin/admin-ajax.php",
          type: 'POST',
          data: 'action=my_special_action&main_catid=' + $mainCat,

          success: function(results) {
            //  alert(results);
            jQuery("#sub_cat").removeAttr("disabled");
            jQuery("#sub_cat").append(results);
          }
        });
      });
    });
</script>

</div>