在不重新加载页面的情况下显示第二个相关下拉列表

Question

我正在尝试在我的网站上构建一个“价格计算器”，以显示各种智能手机的维修价格。我已经设法创建下拉菜单，第二个仅在选择第一个后显示。在第一个下拉列表中做出选择后，页面会重新加载，然后显示第二个。我想在不重新加载页面的情况下实现相同的效果。这是我目前的代码：

<form method="POST" action="">
                    <div>
                        <?php
                            $args = array(
                                'hierarchical' => 1,
                                'depth' => 1,
                                'orderby' => 'name',
                                'echo' => 0,
                                'taxonomy' => 'marke',
                                // this leads to variable name $_POST['marke']
                                'name' => 'marke-sel'
                            );
                            if( ! isset($_POST['marke-sel']) ):
                                $args['show_option_none'] = 'Hersteller ausw&auml;hlen';
                            else:
                                $args['selected'] = $_POST['marke-sel'];
                            endif;
                            $marke = wp_dropdown_categories( $args );
                            // this enables the buttonless js possibility
                            $marke = preg_replace("#<select([^>]*)>#", "<select onchange='return this.form.submit()'>", $marke);
                            echo $marke;
                        ?>
                        <noscript>
                            <div>
                                <input type="submit" value="marke" />
                            </div>
                        </noscript>
                    </div>
                </form>
                
                <?php
                    if( isset($_POST['marke-sel']) && $_POST['marke-sel'] ):
                ?>
                
                <form method="POST" action="<? bloginfo('url'); ?>">
                    <input type="hidden" name="marke" value="<?php echo $_POST['marke-sel'] ?>">
                    <div>
                    <?php
                        $the_query = new WP_Query( array(
                            'post_type' => 'reparaturpreise',
                            'tax_query' => array(
                                array (
                                    'taxonomy' => 'marke',
                                    'field' => 'id',
                                    'terms' => $_POST['marke-sel'],
                                )
                            ),
                        ) );

                        if ( $the_query->have_posts() ) :
                    ?>
                    <div class="form-option parent-field-wrapper">
                        <label for=""></label>
                        <select name='modell' id='modell' onchange='document.location=this.value'>
                            <option value="">Modell ausw&auml;hlen</option>
                            <?php while ( $the_query->have_posts() ) :
                                $the_query->the_post();
                            ?>
                            <option value="<?php the_permalink();?>"><?php the_title(); ?></option>
                            <?php endwhile; ?>
                        </select>
                    </div>
                    <?php endif;
                    wp_reset_postdata();
                    
                    $modell = preg_replace("#<select([^>]*)>#", "<select onchange='this.form.submit()'>", $modell);
                                echo $modell;
                            ?>
                            <noscript>
                                <div>
                                    <input type="submit" value="modell" />
                                </div>
                            </noscript>
                        </div>
                    </form>
                <?php endif; ?>
                
                <?php
                if( isset($_POST['marke-sel']) && $_POST['modell']  ):
                    $args = array( 
                        'post_type' => 'reparaturpreise',
                        'cat' => $_POST['marke-sel'],
                        'posts_per_page' => 1 
                    ); 
                $loop = new WP_Query( $args ); 
                while ( $loop->have_posts() ) : $loop->the_post(); 
                    the_title();
                    echo '<div class="entry-content">'; 
                        the_content(); 
                    echo '</div>'; 
                endwhile;
                endif;
                ?>

Answer 1

我终于设法使用这里的代码让它工作：http://webprow.com/blog/dynamic-dependent-dropdown-categories-posts/

对于寻找类似解决方案的其他人，这是您需要在 functions.php 中插入的代码：

if ( ! class_exists( 'frontendAjaxDropdown' ) ):
    class frontendAjaxDropdown {
        
        function __construct() {
            add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') );
            add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );
            add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );
        }
        
        function init_shortocde()
        
        { ?>
        
        <div class="ajax-dropdown">
            <?php
            $args = array(
                'name' => 'main_cat',
                'id'=> 'main_cat',
                'selected' => -1,
                'hierarchical' => '1',
                'depth' => 1,
                'show_option_none' => 'ENTER PLACEHOLDER FOR TAXONOMY HERE',
                'option_none_value' => '',
                'hide_empty' => 0,
                'taxonomy' => 'ENTER YOUR TAXONOMY HERE'
            );
            wp_dropdown_categories($args);
            ?>

            <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").animate({ opacity: 1 });},
                            success: function(data) {
                                $("#loading").animate({ opacity: 0 });
                                $("#sub_cat").append(data);
                            }
                        });
                    });
                    $("select option[value='']").attr('disabled',"disabled"); 
                    $("select option[value='']").attr('selected',"selected"); 
                })(jQuery);
            </script>
            <div id="loading" style="opacity: 0;">wird geladen...</div>
                <div id="sub_cat"></div>
                </div>
            </div>
            
        <?php }
 
        function getSubCat() { 
            $cat_id = $_POST['cat_id'];
            $args=array(
                'post_type' => 'ENTER YOUR CPT HERE',
                'tax_query' => array(
                    array (
                        'taxonomy' => 'ENTER YOUR TAXONOMY HERE',
                        'field' => 'id',
                        'terms' => $cat_id
                    )
                ),
            );
    
            $my_query = null;
            $my_query = new WP_Query($args);

            if( $my_query->have_posts() ) { ?>
                <select name="menu[]" onchange='document.location=this.value'>
                    <option value="" disabled selected>ENTER PLACEHOLDER FOR CPT HERE</option>
                    <?php
                        while ($my_query->have_posts()) : $my_query->the_post(); ?>
                            <option value="<?php the_permalink();?>" ><?php the_title(); ?> </option>
                    <?php 
                        endwhile;
                        wp_die();
                    ?>
                </select>
            <?php 
                wp_reset_query();
                die();
            ?>  <?php }
        }
    }
endif;
new frontendAjaxDropdown();

之后，您可以使用以下短代码放置下拉菜单：

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

在不重新加载页面的情况下显示第二个相关下拉列表

Show second dependent dropdown without reloading the page

ajax

wordpress

dropdown

custom-post-type