Php 将“城市”字段更改为唯一国家/地区的下拉列表

在Woocommerce中，我编写了一些用于计费和配送城市的代码，以使用配送费用。现在我想在更改国家时更改城市列表

这是我的自定义代码：

// Change "city" checkout billing and shipping fields to a dropdown
add_filter( 'woocommerce_checkout_fields' , 'override_checkout_city_fields' );
function override_checkout_city_fields( $fields ) {
    global $woocommerce;

    // Define here in the array your desired cities (Here an example of cities)
    $option_cities = array(
    "city1"=>"city1",
    "city2"=>"city2",
    "city3"=>"city3"
    );

    $country = $woocommerce->customer->get_shipping_country();
    if ($country == 'SA'){
        $fields['billing']['billing_city']['type'] = 'select';
        $fields['billing']['billing_city']['options'] = $option_cities;
        $fields['shipping']['shipping_city']['type'] = 'select';
        $fields['shipping']['shipping_city']['options'] = $option_cities;

    } else{
        $fields['billing']['billing_city']['type'] = 'text';
        $fields['shipping']['shipping_city']['type'] = 'text';
    }  

    return $fields;
}

但是当用户将国家/地区从沙特阿拉伯更改为卡塔尔时，

billing\u city

不会更改为文本类型，因此我们必须刷新页面以将

billing\u city

显示为文本类型

我需要唯一的

billing_city

作为“沙特阿拉伯”国家的选择类型。否则，我们需要显示文本类型

---

如何做到这一点？

这需要与javascript有所不同，因为它基于客户端（浏览器端）事件

因此，您需要保持WooCommerce billing city和shipping city字段的原样，在这里我们将添加其他自定义选择字段（默认情况下隐藏）

然后，当所选国家为“沙特阿拉伯”（您的目标国家）时，将隐藏默认的WooCommerce city字段，并显示相关的自定义选择字段

当在城市下拉字段中选择一个值时，我们会将该值复制到默认的城市输入字段（即使它是隐藏的）

因此，当客户下订单时，WooCommerce无论如何都将具有正确的城市价值

请注意，帐单地址与发货地址不同，而且客户的帐单国家/地区可能与发货国家/地区不同……因此，您需要更加注意帐单和发货地址的行为

以下是完整的代码：

// Add custom checkout select fields
add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_select_fields' );
function add_custom_checkout_select_fields( $fields ) {
    // Define HERE in the array, your desired cities
    $cities = array(
        __( 'City1', 'woocommerce' ),
        __( 'City2', 'woocommerce' ),
        __( 'City3', 'woocommerce' ),
    );

    // Format in the right way the options array of cities
    $options = array( '' => __( 'Select a city', 'woocommerce' ) . '…' );
    foreach ( $cities as $city ) {
        $options[$city] = $city;
    }

    // Adding 2 custom select fields
    $fields['billing']['billing_city2'] = $fields['shipping']['shipping_city2'] = array(
        'type'         => 'select',
        'required'     => true,
        'options'      => $options,
        'autocomplete' => 'address-level2',
    );
    
    // Copying data from WooCommerce city fields
    $fields['billing']['billing_city2']['class'] = array_merge($fields['billing']['billing_city']['class'], array('hidden') );
    $fields['shipping']['shipping_city2']['class'] = array_merge($fields['shipping']['shipping_city']['class'], array('hidden') );
    $fields['billing']['billing_city2']['label'] = $fields['billing']['billing_city']['label'];
    $fields['shipping']['shipping_city2']['label'] = $fields['shipping']['shipping_city']['label'];
    $fields['billing']['billing_city2']['priority'] = $fields['billing']['billing_city']['priority'] + 5;
    $fields['shipping']['shipping_city2']['priority'] = $fields['shipping']['shipping_city']['priority'] + 5;

    return $fields;
}

// Custom inline styles to hide some checkout fields
add_action( 'wp_head', 'custom_checkout_css' );
function custom_checkout_css() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) {
        ?><style>
        #billing_city_field.hidden, #billing_city2_field.hidden,
        #shipping_city_field.hidden, #shipping_city2_field.hidden
        {display:none !important;}
        </style><?php
    }
}

// Custom jQuery code
add_action( 'wp_footer', 'custom_checkout_js_script' );
function custom_checkout_js_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script type="text/javascript">
    (function($){
        var targetedCountry = 'FR',
            initialBCountry = '<?php echo WC()->customer->get_billing_country(); ?>',
            initialSCountry = '<?php echo WC()->customer->get_shipping_country(); ?>';

        function showHideFields( country, fieldset ) {
            var select2Classes = 'country_select select2-hidden-accessible';

            if( country === targetedCountry ) {
                $('#'+fieldset+'_city2_field').removeClass('hidden');
                $('#'+fieldset+'_city_field').addClass('hidden');
                $('select#'+fieldset+'_city2').addClass(select2Classes);
            } else if( country !== targetedCountry && $('#'+fieldset+'_city_field').hasClass('hidden') ) {
                $('#'+fieldset+'_city2_field').addClass('hidden');
                $('#'+fieldset+'_city_field').removeClass('hidden');
                $('select#'+fieldset+'_city2').removeClass(select2Classes);
            }
        }

        // 1. On Start (after Checkout is loaded)
        showHideFields(initialBCountry, 'billing');
        showHideFields(initialSCountry, 'shipping');

        // 2. Live: On Country change event
        $('body').on( 'change', 'select#billing_country', function(){
            showHideFields($(this).val(), 'billing');
        });
        $('body').on( 'change', 'select#shipping_country', function(){
            showHideFields($(this).val(), 'shipping');
        });

        // 3. Live: On City change event for "Saudi Arabia" country
        $('body').on( 'change', 'select#billing_city2', function(){
             $('input#billing_city').val($(this).val());
        });
        $('body').on( 'change', 'select#shipping_city2', function(){
             $('input#shipping_city').val($(this).val());
        });
    })(jQuery);
    </script>
    <?php
    endif;
}

//添加自定义签出选择字段
添加过滤器（'woocommerce\u checkout\u fields'、'add\u custom\u checkout\u select\u fields'）；
函数添加\自定义\签出\选择\字段（$fields）{
//在此数组中定义所需的城市
$cities=数组(
__（“城市1”、“商业”），
__（‘城市2’、‘商业’），
__（“城市3”、“商业”），
);
//以正确的方式设置城市选项数组的格式
$options=array（''=>uu（'选择一个城市'，'woocommerce'）。&hellip；'）；
foreach（$cities作为$city）{
$options[$city]=$city；
}
//添加2个自定义选择字段
$fields['billing']['billing\u city2']=$fields['shipping']['shipping\u city2']=array(
'类型'=>'选择'，
“必需”=>true，
“选项”=>$options，
“自动完成”=>“地址级别2”，
);
//从WooCommerce city字段复制数据
$fields['billing']['billing\u city2']['class']=array\u merge（$fields['billing']['billing\u city']['class']，array（'hidden'）；
$fields['shipping']['shipping\u city2']['class']=array\u merge（$fields['shipping']['shipping\u city']['class']，array（'hidden'）；
$fields['billing']['billing_city2']['label']=$fields['billing']['billing_city']['label']；
$fields['shipping']['shipping_city2']['label']=$fields['shipping']['shipping_city']['label']；
$fields['billing']['billing_city2']['priority']=$fields['billing']['billing_city']['priority']+5；
$fields['shipping']['shipping_city2']['priority']=$fields['shipping']['shipping_city']['priority']+5；
返回$fields；
}
//自定义内联样式以隐藏某些签出字段
添加操作（'wp\u head'，'custom\u checkout\u css'）；
函数自定义检查css（）{
//仅签出页面
if（is_checkout（）&&！is_wc_endpoint_url（））{
?>
#账单_city_field.hidden，#账单_city2_field.hidden，
#shipping_city_field.hidden，#shipping_city2_field.hidden
{显示：无！重要；}
（函数（$）{
var targetedCountry='FR'，
initialBCountry=“”，
InitialScontry=''；
函数showHideFields（国家/地区，字段集）{
var select2Classes='country\u select2 hidden accessible'；
如果（国家===目标国家）{
$（“#”+字段集+“#city2#field”）.removeClass（'hidden'）；
$（'#'+fieldset+''u city'u field'）.addClass（'hidden'）；
$（'select#'+字段集+''u city2'）。addClass（select2Classes）；
}else if（country！==targetedCountry&&$（'#'+fieldset+''u city\u field'）。hasClass（'hidden'））{
$（“#”+字段集+“city2_field”）.addClass（'hidden'）；
$（“#”+字段集+“#城市#字段”）.removeClass（'hidden'）；
$（'select#'+fieldset+'u city2'）。移除类（select2类）；
}
}
//1.启动时（加载签出后）
showHideFields（缩写为“账单”）；
showHideFields（初始输入，“装运”）；
//2.现场直播：国家改变活动
$（'body'）。在（'change'，'select#billing_country'，function（）上{
showHideFields（$（this.val（），'billing'）；
});
$（'body'）。在（'change'，'select#shipping_country'，function（）上{
showHideFields（$（this.val（），'shipping'）；
});
//3.现场：关于“沙特阿拉伯”国家的城市变化事件
$（'body'）。在（'change'，'select#billing#city2'，function（）上{
$（'input#billing_city'）.val（$（this.val（））；
});
$（'body'）。在（'change'，'select#shipping_city2'，function（）上{
$（'input#shipping_city'）.val（$（this.val（））；
});
})（jQuery）；
请对下面的答案进行反馈，我们将不胜感激。谢谢