將值從第一個下拉列表提交到第二個下拉列表而不重新加載頁面

Question

我的網站上有一個維修價格計算器，用戶可以首先從下拉列表中選擇 select 品牌，然后從第二個下拉列表中選擇 select 確切的 model。 當前頁面在從第一個下拉列表中選擇一個選項后重新加載，並使用 $_POST 傳遞所選值，然后第二個下拉列表顯示來自所選品牌的所有設備。 選擇 model 后，用戶將轉到特定設備頁面。

我更願意傳遞該值並顯示第二個下拉列表而不重新加載頁面。 我曾嘗試使用 ajax 執行此操作，但無法獲得正確的代碼，因此我回到了第一個工作設置。 誰能告訴我我需要將值提交到第二個下拉列表而不重新加載的代碼？

這是我到目前為止的代碼：

<h2>Preisrechner</h2>
<div class="preisrechner-select-wrapper">
    <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$1 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=""/>
                    <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$1 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;
            ?>
</div>

Answer 1

如果 PHP 生成的代碼需要更改（即結果），則需要重新加載頁面。 解決此問題的唯一方法是將此代碼移動到可以通過 AJAX 調用調用的端點並返回結果。

可以在此處找到可以針對您的場景進行更改的一個很好的示例：

https://premium.wpmudev.org/blog/using-ajax-with-wordpress/