WordPress维修价格计算器下拉无刷新联动实现咨询

核心实现逻辑 #

• 100%兼容原有功能的降级逻辑，禁用JavaScript的场景下仍保留表单提交刷新的可用路径
• 品牌下拉触发选中变化时，异步传递选中的品牌分类ID到WordPress内置AJAX接口，全程不刷新页面
• 后台接口根据传入的品牌ID，按照原有查询规则拉取对应的设备型号列表，组装成下拉菜单HTML返回给前端
• 前端拿到返回内容后直接填充到预留的型号下拉容器中，保留原有选中型号跳转对应详情页的逻辑
• 所有原页面的外文提示文本替换为中文，无外部站点跳转链接

具体代码改动 #

1. 前端页面结构调整 #

保留原有品牌选择的PHP渲染逻辑，给核心交互元素加固定ID，预留型号下拉的渲染容器，替换原有的自动提交逻辑：

<h2>维修价格计算器</h2>
<div class="preisrechner-select-wrapper">
    <!-- 品牌选择区域 -->
    <form method="POST" action="" id="brandForm">
        <div>
            <?php
                $args = array(
                    'hierarchical' => 1,
                    'depth' => 1,
                    'orderby' => 'name',
                    'echo' => 0,
                    'taxonomy' => 'marke',
                    'name' => 'marke-sel'
                );
                if( ! isset($_POST['marke-sel']) ):
                    $args['show_option_none'] = '请选择品牌';
                else:
                    $args['selected'] = $_POST['marke-sel'];
                endif;
                $marke = wp_dropdown_categories( $args );
                // 给品牌下拉加固定ID，去掉原有的强制自动提交逻辑
                $marke = preg_replace("#<select([^>]*)>#", "<select$1 id='brandSelect'>", $marke);
                echo $marke;
            ?>
            <noscript>
                <div>
                    <input type="submit" value="确认品牌选择"/>
                </div>
            </noscript>
        </div>
    </form>
    <!-- 型号下拉的预留渲染容器 -->
    <div id="modelSelectContainer">
        <?php
            // 保留原有非AJAX场景的渲染逻辑，保证禁用JS时功能正常
            if( isset($_POST['marke-sel']) && $_POST['marke-sel'] ):
                $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() ) :
        ?>
        <form method="POST" action="<?php bloginfo('url'); ?>">
            <div>
                <select name='modell' id='modell' onchange='document.location=this.value'>
                    <option value="">请选择设备型号</option>
                    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <option value="<?php the_permalink();?>"><?php the_title(); ?></option>
                    <?php endwhile; ?>
                </select>
            </div>
            <noscript>
                <div>
                    <input type="submit" value="确认型号选择"/>
                </div>
            </noscript>
        </form>
        <?php 
                endif;
                wp_reset_postdata();
            endif; 
        ?>
    </div>
</div>

2. 注册后台AJAX处理接口 #

将以下代码添加到主题的functions.php文件中，用于接收前端的异步请求，返回对应品牌的型号下拉内容：

// 为登录、未登录用户都开放接口访问权限
add_action('wp_ajax_load_model_options', 'load_model_options');
add_action('wp_ajax_nopriv_load_model_options', 'load_model_options');
function load_model_options() {
    // 校验传入的品牌ID合法性
    $brand_id = intval($_POST['brand_id']);
    if( !$brand_id ) {
        echo '<select name="modell" id="modell"><option value="">请选择设备型号</option></select>';
        die;
    }
    // 沿用原有查询规则拉取对应品牌的维修设备
    $the_query = new WP_Query( array(
        'post_type' => 'reparaturpreise',
        'tax_query' => array(
            array (
                'taxonomy' => 'marke',
                'field' => 'id',
                'terms' => $brand_id,
            )
        ),
    ));
    // 组装下拉菜单HTML
    $output = '<select name="modell" id="modell" onchange="document.location=this.value">';
    $output .= '<option value="">请选择设备型号</option>';
    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            $output .= '<option value="'.get_the_permalink().'">'.get_the_title().'</option>';
        }
    }
    wp_reset_postdata();
    $output .= '</select>';
    echo $output;
    // 必须终止进程，否则会返回额外的系统内容
    die;
}

*注意：接口函数末尾必须保留die;语句，否则WordPress会在返回内容后继续输出系统自带的HTML标签，导致前端渲染时格式错乱。

3. 前端异步交互逻辑 #

将以下JS代码添加到页面底部（或主题公共JS文件中），实现选中品牌后无刷新加载型号下拉的效果：

document.addEventListener('DOMContentLoaded', function() {
    const brandSelect = document.getElementById('brandSelect');
    const modelContainer = document.getElementById('modelSelectContainer');
    const brandForm = document.getElementById('brandForm');
    if(!brandSelect || !modelContainer) return;
    brandSelect.addEventListener('change', function() {
        const selectedBrandId = this.value;
        // 未选中有效品牌时清空型号容器
        if(!selectedBrandId) {
            modelContainer.innerHTML = '';
            return;
        }
        // 构造异步请求参数
        const requestData = new FormData();
        requestData.append('action', 'load_model_options');
        requestData.append('brand_id', selectedBrandId);
        // 发起请求
        fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: 'POST',
            body: requestData
        })
        .then(response => response.text())
        .then(modelHtml => {
            modelContainer.innerHTML = modelHtml;
        })
        .catch(() => {
            // 请求失败时自动回退到原有表单提交逻辑
            brandForm.submit();
        })
    })
})

适配说明 #

• 完全沿用原有业务逻辑，没有改动查询规则、详情页跳转的核心流程
• 网络异常、请求失败的场景下会自动回退到原有页面刷新逻辑，不会出现功能完全失效的问题
• 所有原代码中的德语提示文本已替换为中文，无任何外部站点跳转链接

内容的提问来源于stack exchange，提问作者websoluteAT