WooCommerce结账页面自定义联动下拉选择字段实现

嘿，很高兴你已经搞定了WooCommerce结账页面的两个自定义下拉！要实现「选第一个下拉的不同选项，第二个下拉自动切换对应选项组」的效果，咱们可以通过JavaScript监听第一个下拉的变化，动态更新第二个下拉的内容。下面是完整的实现方案，一步步来：

假设你已经用类似下面的PHP代码注册了两个字段（如果还没的话，也可以参考这个）：

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_dropdowns' );
function add_custom_checkout_dropdowns( $fields ) {
    // 第一个下拉列表
    $fields['billing']['custom_dropdown1'] = array(
        'type'          => 'select',
        'label'         => '第一个下拉选项',
        'required'      => true,
        'options'       => array(
            ''          => '请选择',
            'A'         => '选项A',
            'C'         => '选项C',
            'D'         => '选项D'
        ),
        'class'         => array('form-row-wide'),
        'priority'      => 20
    );

    // 第二个下拉列表（初始可以留空或者默认选项）
    $fields['billing']['custom_dropdown2'] = array(
        'type'          => 'select',
        'label'         => '第二个下拉选项',
        'required'      => true,
        'options'       => array(
            ''          => '请先选择第一个选项'
        ),
        'class'         => array('form-row-wide'),
        'priority'      => 21
    );

    return $fields;
}

接下来是核心的动态切换部分，咱们用jQuery来写（WooCommerce默认已经加载了jQuery，不用额外引入）：

add_action( 'wp_footer', 'custom_checkout_dropdowns联动' );
function custom_checkout_dropdowns联动() {
    // 只在结账页面加载这段JS
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // 定义第一个下拉选项对应的第二个下拉选项组
            const dropdownOptions = {
                'A': [
                    {value: 'A1', text: 'A组选项1'},
                    {value: 'A2', text: 'A组选项2'},
                    {value: 'A3', text: 'A组选项3'}
                ],
                'C': [
                    {value: 'C1', text: 'C组选项1'},
                    {value: 'C2', text: 'C组选项2'}
                ],
                'D': [
                    {value: 'D1', text: 'D组选项1'},
                    {value: 'D2', text: 'D组选项2'},
                    {value: 'D3', text: 'D组选项3'},
                    {value: 'D4', text: 'D组选项4'}
                ]
            };

            // 初始加载时，根据第一个下拉的默认值更新第二个下拉
            function updateSecondDropdown() {
                const selectedValue = $('#custom_dropdown1').val();
                const $secondDropdown = $('#custom_dropdown2');
                
                // 清空第二个下拉的现有选项
                $secondDropdown.empty();
                
                if (selectedValue && dropdownOptions[selectedValue]) {
                    // 添加默认提示
                    $secondDropdown.append('<option value="">请选择</option>');
                    // 循环添加对应选项
                    dropdownOptions[selectedValue].forEach(option => {
                        $secondDropdown.append(`<option value="${option.value}">${option.text}</option>`);
                    });
                } else {
                    // 如果没选第一个下拉，显示提示
                    $secondDropdown.append('<option value="">请先选择第一个选项</option>');
                }
            }

            // 页面加载时执行一次
            updateSecondDropdown();

            // 监听第一个下拉的变化事件
            $('#custom_dropdown1').on('change', function() {
                updateSecondDropdown();
            });
        });
    </script>
    <?php
    }
}

如果需要把这两个字段的值保存到订单里，还需要添加下面的PHP代码：

// 保存自定义字段到订单
add_action( 'woocommerce_checkout_create_order', 'save_custom_checkout_fields_to_order' );
function save_custom_checkout_fields_to_order( $order ) {
    if ( isset( $_POST['custom_dropdown1'] ) ) {
        $order->update_meta_data( '_custom_dropdown1', sanitize_text_field( $_POST['custom_dropdown1'] ) );
    }
    if ( isset( $_POST['custom_dropdown2'] ) ) {
        $order->update_meta_data( '_custom_dropdown2', sanitize_text_field( $_POST['custom_dropdown2'] ) );
    }
}

// 在订单详情页面显示字段值
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_fields_in_admin_order' );
function display_custom_fields_in_admin_order( $order ) {
    echo '<p><strong>第一个下拉选项:</strong> ' . $order->get_meta( '_custom_dropdown1' ) . '</p>';
    echo '<p><strong>第二个下拉选项:</strong> ' . $order->get_meta( '_custom_dropdown2' ) . '</p>';
}

• 把所有代码放到你的WordPress子主题的functions.php文件里，或者用Code Snippets这类自定义代码插件来添加，这样不会因为主题更新丢失代码。
• 如果你已经有自己的字段注册代码，只需要把JS部分的字段ID（比如#custom_dropdown1）改成你实际的字段ID就行。
• 测试的时候，记得清空浏览器缓存，确保新的JS代码能加载生效。

内容的提问来源于stack exchange，提问作者Asher A.