WooCommerce如何根据下拉选择值自动填充关联的城市邮编等额外字段

步骤1：完善PHP后端代码 #

先统一维护郊区、城市、邮编的映射关系，同时把关联数据传入前端供JS调用，完整PHP代码如下：

// 统一维护郊区=>城市/邮编的映射关系，按需新增即可
function get_suburb_mapping() {
    return array(
        'ny' => array(
            'name' => 'Nester',
            'city' => 'Nester 对应城市',
            'postcode' => '对应邮编'
        ),
        'bat_cave' => array(
            'name' => 'Bat Cave',
            'city' => 'Gotham',
            'postcode' => '0101'
        )
        // 其他郊区按相同格式添加
    );
}

// 自定义账单郊区字段
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields($fields) {
    $suburb_map = get_suburb_mapping();
    $suburb_options = array('' => 'Please select');
    foreach ($suburb_map as $key => $val) {
        $suburb_options[$key] = $val['name'];
    }
    $fields['billing_suburb'] = array(
        'label'         => __('Your Suburb', 'woocommerce'),
        'placeholder'   => _x('Your Suburb', 'placeholder', 'woocommerce'),
        'required'      => false,
        'clear'         => false,
        'type'          => 'select',
        'options'       => $suburb_options
    );
    return $fields;
}

// 把郊区映射数据传到前端
add_action('wp_enqueue_scripts', 'pass_suburb_map_to_frontend');
function pass_suburb_map_to_frontend() {
    // 仅在结账页加载
    if (is_checkout()) {
        // 把映射数据注册为全局JS变量
        wp_localize_script(
            'wc-checkout', // 依赖WooCommerce默认的结账脚本
            'suburbMap',
            get_suburb_mapping()
        );
    }
}

步骤2：添加前端联动JS代码 #

你可以把这段JS加到子主题的自定义JS文件里，或者挂到结账页的页脚钩子中：

jQuery(document).ready(function($) {
    // 监听郊区下拉框的变化事件
    $('select#billing_suburb').on('change', function() {
        const selectedSuburb = $(this).val();
        if (selectedSuburb && suburbMap[selectedSuburb]) {
            // 填充对应城市和邮编
            $('input#billing_city').val(suburbMap[selectedSuburb].city).trigger('change');
            $('input#billing_postcode').val(suburbMap[selectedSuburb].postcode).trigger('change');
        } else {
            // 未选择郊区时清空字段
            $('input#billing_city, input#billing_postcode').val('').trigger('change');
        }
    });
});

注意事项 #

• 如果需要同时支持送货地址联动，把代码中所有billing_开头的字段名替换为shipping_即可
• 映射数组里的内容可以根据你的实际需求任意调整新增，不需要修改其他逻辑

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