WooCommerce结账页先选地区再选城市功能异常排查

问题背景 #

需要在WooCommerce结账页面实现地区与城市联动选择：用户先选择地区，下拉框自动加载对应城市。目前地区下拉字段正常显示，但城市字段完全不显示；JS文件路径正确，浏览器控制台无报错，已尝试以下代码，寻求修复方案。

原代码 #

原PHP代码 #

function custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_region'] = array(
        'type' => 'select',
        'options' => array(
            'guria' => 'Guria',
            'adjara' => 'Adjara',
            // Add other regions here
        ),
        'required' => true,
        'label' => __('Region', 'woocommerce')
    );
    
    $fields['billing']['billing_city'] = array(
        'type' => 'select',
        'options' => array(),
        'required' => true,
        'label' => __('City', 'woocommerce')
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function load_custom_js() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/custom.js', array( 'jquery' ), '', true );
    wp_localize_script( 'custom-js', 'regions_cities', array(
        'guria' => array('City1', 'City2'),
        'adjara' => array('City3', 'City4'),
        // Add other regions and their cities here
    ));
}
add_action( 'wp_enqueue_scripts', 'load_custom_custom_js' );

原JS代码 #

jQuery(document).ready(function($) {
    $('select#billing_region').change(function() {
        var selectedRegion = $(this).val();
        var cities = regions_cities[selectedRegion];
        var citySelect = $('select#billing_city');
        citySelect.empty();
        $.each(cities, function(index, city) {
            citySelect.append($('<option></option>').attr('value', city).text(city));
        });
    });
});

核心问题与修复方案 #

1. PHP函数名拼写错误（最关键） #

注册JS脚本的函数名为load_custom_js，但添加wp_enqueue_scripts钩子时误写为load_custom_custom_js，导致JS脚本完全没有被加载，这是城市字段不显示的核心原因。

2. 城市字段无初始选项导致渲染异常 #

WooCommerce对于必填的select字段，如果没有任何选项，可能会被隐藏或者无法正常渲染。需要给城市字段添加默认占位选项。

3. 补充初始化逻辑 #

页面加载时如果地区有默认选中值，需要自动触发一次城市加载，提升用户体验。

修正后的完整代码 #

修正后的PHP代码 #

function custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_region'] = array(
        'type' => 'select',
        'options' => array(
            '' => __('请选择地区', 'woocommerce'), // 添加默认占位选项
            'guria' => 'Guria',
            'adjara' => 'Adjara',
            // 补充其他地区
        ),
        'required' => true,
        'label' => __('地区', 'woocommerce')
    );
    
    $fields['billing']['billing_city'] = array(
        'type' => 'select',
        'options' => array(
            '' => __('请先选择地区', 'woocommerce') // 添加默认占位选项，避免字段被隐藏
        ),
        'required' => true,
        'label' => __('城市', 'woocommerce')
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function load_custom_js() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/custom.js', array( 'jquery' ), '', true );
    wp_localize_script( 'custom-js', 'regions_cities', array(
        'guria' => array('City1', 'City2'),
        'adjara' => array('City3', 'City4'),
        // 补充其他地区及对应城市
    ));
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' ); // 修正函数名拼写错误

修正后的JS代码 #

jQuery(document).ready(function($) {
    // 封装城市加载逻辑，便于复用
    function loadCities(selectedRegion) {
        var cities = regions_cities[selectedRegion] || [];
        var citySelect = $('select#billing_city');
        citySelect.empty();
        
        // 添加默认占位选项
        citySelect.append($('<option></option>').attr('value', '').text('请选择城市'));
        
        // 循环添加对应城市选项
        $.each(cities, function(index, city) {
            citySelect.append($('<option></option>').attr('value', city).text(city));
        });
    }

    // 地区下拉框切换时触发城市加载
    $('select#billing_region').change(function() {
        var selectedRegion = $(this).val();
        loadCities(selectedRegion);
    });

    // 页面初始化时，若地区已有选中值，自动加载对应城市
    var initialRegion = $('select#billing_region').val();
    if (initialRegion) {
        loadCities(initialRegion);
    }
});

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