将值从第一个下拉列表提交到第二个下拉列表而不重新加载页面

Posted 2023-03-27

【中文标题】将值从第一个下拉列表提交到第二个下拉列表而不重新加载页面

【英文标题】：Submit value from first dropdown to second dropdown without reloading the page

【发布时间】：2021-04-27 07:33:12

【问题描述】：

我的网站上有一个维修价格计算器，用户可以先从下拉列表中选择品牌，然后从第二个下拉列表中选择确切的型号。 当前页面在从第一个下拉列表中选择一个选项后重新加载，并使用 $_POST 传递所选值，然后第二个下拉列表显示来自所选品牌的所有设备。选择模型后，用户将被转发到特定设备页面。

我希望在不重新加载页面的情况下传递该值并显示第二个下拉列表。我曾尝试使用 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>

【问题讨论】：

根据您的要求有两种可能的方法：1.) 您没有那么多数据。然后将所有数据直接加载到您的第一个下拉列表中，并将第二个下拉列表的所有可能数据加载到一个数组中，并根据第一个下拉列表的选择过滤数组并使用 JS 显示第二个下拉列表。 2.) 你有很多数据。然后填充第一个下拉列表 - 使用第一个下拉列表的结果启动对服务器上的 php 脚本的 AJAX 调用，该脚本进行查询并返回由 JS 再次填充到下拉列表中的下拉数据。

【参考方案1】：

如果 PHP 生成的代码需要更改（即结果），则需要重新加载页面。解决此问题的唯一方法是将此代码移动到可以通过 AJAX 调用调用的端点并返回结果。

可以在此处找到可以针对您的场景进行更改的一个很好的示例：

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