WooCommerce结账页：解决加载时城市选择框未按国家显示问题

核心问题 #

页面初始化阶段没有执行「根据当前选中国家显示对应城市选择框」的逻辑，只有切换国家时才触发隐藏/显示操作，导致加载时所有框都可见。

解决步骤 #

1. 提取通用逻辑为独立函数：把切换国家时的显示/隐藏逻辑抽出来，避免重复代码，方便初始化和事件触发时调用。
2. DOM初始化时执行一次逻辑：页面加载完成后，获取当前默认选中的国家，调用通用函数处理城市选择框的显示状态。
3. 监听WooCommerce动态更新事件：结账页面可能通过AJAX刷新字段，需要监听updated_checkout事件，确保刷新后重新执行逻辑。

具体代码示例 #

1. 通用切换逻辑函数

function toggleCitySelects(selectedCountry) {
    // 隐藏所有城市选择框
    $('.country-city-select').hide();
    
    // 显示当前国家对应的城市选择框
    const targetSelect = $('.country-city-select[data-country="' + selectedCountry + '"]');
    targetSelect.show();

    // 同步选中的城市值到隐藏的billing_address_1字段
    if (targetSelect.length) {
        $('#billing_address_1').val(targetSelect.val());
    } else {
        // 如果当前国家没有专属城市选择框，可根据需求重置或显示默认字段
        $('#billing_address_1').val('');
    }
}

2. 初始化与事件绑定

jQuery(document).ready(function($) {
    // 页面加载完成后，执行初始化
    const initialCountry = $('#billing_country').val();
    toggleCitySelects(initialCountry);

    // 绑定国家切换事件
    $('#billing_country').on('change', function() {
        toggleCitySelects($(this).val());
        // 保留你原有的AJAX更新逻辑
        // ... 你的AJAX代码
    });

    // 监听WooCommerce结账更新事件，防止AJAX刷新后状态失效
    $(document).on('updated_checkout', function() {
        const currentCountry = $('#billing_country').val();
        toggleCitySelects(currentCountry);
    });
});

3. HTML结构要求

确保每个城市选择框添加统一类名和对应国家的data-country属性，默认隐藏：

<!-- 中国城市选择框 -->
<select class="country-city-select" data-country="CN" style="display:none;">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
</select>

<!-- 美国城市选择框 -->
<select class="country-city-select" data-country="US" style="display:none;">
    <option value="纽约">纽约</option>
    <option value="洛杉矶">洛杉矶</option>
</select>

额外提示 #

• 给所有城市选择框默认加上display:none，避免页面加载时的闪现问题。
• 如果你的城市选择框是通过PHP动态生成的，确保data-country属性正确对应国家代码（比如CN、US，和WooCommerce的国家代码一致）。

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