The Issue
I'm working on customizing the WooCommerce checkout page by reordering the countries in the billing_country and shipping_country dropdown fields. I've achieved this by using the woocommerce_checkout_fields filter to modify the fields' options.

然而,在进行这些自定义之后,我面临着一个问题,即当更改billing_country字段时,billing_state字段不能正确更新.州/省选项保持不变,无论所选国家.

Current Code (Previous Stackoverflow Post)
Here's the code I'm using to reorder the countries and apply the Select2 (selectWoo) functionality:

// Reorder and customize the country dropdowns
add_filter('woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns');
function reorder_checkout_country_dropdowns($fields)
{
    $countries_array = array_merge(
        array(
            'DE' => 'Germany',
            'AT' => 'Austria',
            'CH' => 'Switzerland',
            '-' => '------------',
        ),
        WC()->countries->get_allowed_countries()
    );

    $fields['billing']['billing_country']['type'] = $fields['shipping']['shipping_country']['type'] = 'select';
    $fields['billing']['billing_country']['options'] = $fields['shipping']['shipping_country']['options'] = $countries_array;

    return $fields;
}

// Enqueue JavaScript to apply Select2 functionality
add_action('woocommerce_checkout_init', 'enable_back_selectWoo_on_countries_dropdowns');
function enable_back_selectWoo_on_countries_dropdowns()
{
    wc_enqueue_js("$('#billing_country,#shipping_country').selectWoo();");
}

Attempted Solutions
This code reorders the countries in the dropdowns and applies the Select2 (selectWoo) functionality. However, it doesn't address the issue with the billing_state field not updating correctly when the billing_country is changed.

我try 过各种方法,比如在billing_country字段中添加一个事件侦听器并相应地更新billing_state字段,但我还没有找到一个一致工作的解决方案.

The Question
How can I ensure that the billing_state field updates with the correct state/province options when the billing_country field is changed, even after customizing the country dropdown?

Image example to show the issue

Shows Wrong State Selection for Billing Country Austria

如上图所示,当WooCommerce checkout 时,"奥地利—奥地利"被选为账单国家时,州 Select 字段错误地显示了"德国"的州/省,而不是奥地利的州/省.

当我注释掉第二行add_filter('woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns');时,这个问题没有发生.

推荐答案

将所有代码替换为以下代码,以便在更改国家/地区时处理国家/地区同步:

// Reorder and customize the country dropdowns
add_filter( 'woocommerce_checkout_fields', 'reorder_checkout_country_dropdowns' );
function reorder_checkout_country_dropdowns( $fields ) {
    // Merge sorted countries, with unsorted ones
    $countries_array = array_merge( 
        array(
            'DE' => 'Germany',
            'AT' => 'Austria',
            'CH' => 'Switzerland',
            '-'  => '------------',
        ),
        WC()->countries->get_allowed_countries(), 
    );

    // Change field type from "country" to "select"
    $fields['billing']['billing_country']['type'] = $fields['shipping']['shipping_country']['type'] = 'select';
    // Set sorted countries options
    $fields['billing']['billing_country']['options'] = $fields['shipping']['shipping_country']['options'] = $countries_array;
    // Set correct input class for country field
    $fields['billing']['billing_country']['input_class'] = $fields['shipping']['shipping_country']['input_class'] = ['country_to_state country_select'];
    
    return $fields;
}

测试和工作.

不再需要JavaScript了.

Javascript相关问答推荐

为什么在获取回调内设置状态(不会)会导致无限循环?

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮?

判断表格单元格中是否存在文本框

使搜索栏更改语言

Angular:动画不启动

有没有可能使滑动img动画以更快的速度连续?

Google maps API通过API返回ZERO_RESULTS,以获得方向请求,但适用于Google maps

将本机导航路由react 到导航栏中未列出的屏幕?

为什么按钮会随浮动属性一起移动?

使用POST请求时,Req.Body为空

Web Crypto API解密失败,RSA-OAEP

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

无法避免UV:flat的插值:非法使用保留字"

我想将Sitecore搜索面过滤器从多个转换为单个

当标题被点击时,如何使内容出现在另一个div上?

构建器模式与参数对象输入

顶点图使用组标签更新列之间的条宽

react 路由DOM有条件地呈现元素

P5play SecurityError:无法从';窗口';读取命名属性';Add';:阻止具有源的帧访问跨源帧

如何检测当前是否没有按下键盘上的键?