将第2和第3子类别添加到我的类别下拉列表中

Question

我正在尝试在下拉列表中显示我的类别和子类别。我尝试选择车辆，客户必须首先选择他的车辆，然后是类型，然后选择发动机等。

直到主要类别成为第一个子类别，我才能做到这一点。但是，不显示第二个和第三个子类别。

我自己没有用javascript编写该部分，因为我很遗憾仍然是Javascript的初学者。

有人可以帮助我并告诉我我做错了什么吗？

这是我的代码：

<?php
if ( ! class_exists( 'frontendAjaxDropdown' ) ):
    class frontendAjaxDropdown
    {

        function __construct()
        {

            add_shortcode( 'car_conf', array($this, 'init_shortocde') );

            add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );
            add_action( 'wp_ajax_get_subsubcat', array($this, 'getSubSubCat') );


            add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );
            add_action('wp_ajax_nopriv_get_subsubcat', array($this, 'getSubSubCat') );

        }

        function init_shortocde()
        {

            wp_dropdown_categories(
                'taxonomy=product_cat&name=main_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&show_option_none=All Categories'
            );
            ?>
            <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() },
                            success: function(data) {
                                $("#sub_cat").append(data);
                            }
                        });
                    });
                })(jQuery);

                (function($){
                    $("#sub_cat").change(function(){
                        $("#subsub_cat").empty();
                        $.ajax({
                            type: "post",
                            url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                            data: { action: 'get_subsubcat', cat_id: $("#sub_cat option:selected").val() },
                            success: function(data) {
                                $("#subsub_cat").append(data);
                            }
                        });
                    });
                })(jQuery);
            </script>

            <div id="sub_cat"></div>
            <div id="subsub_cat"></div>

            <?php
        }


        function getSubCat()
        {
            wp_dropdown_categories(
                "taxonomy=product_cat&name=sub_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id']}"
            );
            die();
        }

        function getSubSubCat()
        {
            wp_dropdown_categories(
                "taxonomy=product_cat&name=subsub_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id']}"
            );
            die();
        }
    }
endif;
new frontendAjaxDropdown();
?>