Why is there a 0 appearing before selecting from dropdown PHP & Ajax

I have 2 dropdown boxes, when you select from the first dropdown which is a main category, the second one will then load subcategories for the user to select from.

However, on selecting from the first category dropdown a 0 then shows below the second.

Then when you select a category a 0 shows

Can anyone assist to why this is happening please, Here is my code

    if ( ! class_exists( 'frontendAjaxDropdown' ) ):
     class frontendAjaxDropdown
     {
     /**
     * Loading WordPress hooks
     */
     function __construct()
     {
     /**
     * Add shortcode function
     */
     add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') );
     /**
     * Register ajax action
     */
     add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );
     /**
     * Register ajax action for non loged in user
     */
     add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );
    
     }
     
     function init_shortocde()
     {
     $parent_id = 420;
    $args = array(
            'hierarchical' => 1,
            'show_option_none' => '',
            'hide_empty' => 0, // Set to 0 to show empty categories and 1 to hide them
            'parent' => $parent_id,
            'taxonomy' => 'location'
        );
        $subcategories = get_categories($args);
            echo '<select name="main_cat" id="main_cat" class="postform"><option value="">Category...</option>';
                ;
        foreach ($subcategories as $category) {
                echo '<option value="' . $category->term_id . '">' . $category->name . '</option>'; // ID of the category as the value of an option
        }
                echo '</select>';
    
     ?>
     <script type="text/javascript">
     (function($){
     $("#main_cat").change(function(){
     $("#sub_cat").empty();
     $.ajax({
     type: "post",
     url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
     data: { action: 'get_subcat', cat_id: $("#main_cat option:selected").val() },
     beforeSend: function() {$("#loading").fadeIn('slow');},
     success: function(data) {
     $("#loading").fadeOut('slow');
     $("#sub_cat").append(data);
     }
     });
     });
     })(jQuery);
     
     </script>
    
    <div id="loading" style="display: none;">Loading...</div>
     <div id="sub_cat"></div>
     <?php
     }
     
     /**
     * AJAX action: Shows dropdown for selected parent
     */
     function getSubCat()
     {
         
         
          $parent_id = $_POST['cat_id'];
    $args = array(
            'hierarchical' => 1,
            'show_option_none' => '',
            'hide_empty' => 1, // Set to 0 to show empty categories and 1 to hide them
            'parent' => $parent_id,
            'taxonomy' => 'location'
        );
        $subcategories = get_categories($args);
            echo '<select name="sub_cat" id="sub_cat" class="postform"><option value="">Category...</option>';
        
        foreach ($subcategories as $category) {
                echo '<option value="' . $category->term_id . '">' . $category->name . '</option>'; // ID of the category as the value of an option
        }
                echo '</select>';
    
    
     }
   }
    endif;
    new frontendAjaxDropdown();

Answer

At the end of the function getSubCat , add this

wp_die();
Or 
die();

This will solve the issue.

Advertisement

Answer