0

I want to create a dependent dropdown with an ajax call in WordPress. Suppose I have a custom post type named Uniblog with custom taxonomies Countries, Courses, Levels and Intake. I want to create a dropdown where the user can select the university(the post from the custom post type Uniblog). Depends upon the selection of the university by the users it will show another 3 dropdown courses, levels and intakes related to the university.

you can see my custom post type and taxonomies

I tried this but I am only able to make a dependent dropdown with parent and sub-category.

firstly I add the below code in the function.php

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

        /**
        * Show parent dropdown for wordpress category and loaded necessarry javascripts
        */
        function init_shortocde()
        {
            wp_dropdown_categories(
                'name=main_cat&class=form-control&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() },
                            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><br><br><br>
            <?php
        }

        /**
        * AJAX action: Shows dropdown for selected parent
        */
        function getSubCat()
        {
            wp_dropdown_categories(
                "name=sub_cat&class=form-control&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id']}"
            );
            die();
        }
    }
endif;

new frontendAjaxDropdown();  

Later I call as a shortcode like this:

<?php echo do_shortcode( '[ajax-dropdown]' ); ?> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.