不同的城市选择字段取决于 WooCommerce 中的所选国家/地区

问：

在结帐时，我为几个国家/地区进行了单独的城市选择（它们的值将转到隐藏的默认文本字段billing_address_1）。曼城选择我自己做的，他们是个人的。

我还使用流行的解决方案来使用 ajax 更新所有字段。 更改时一切正常 - 当我更改国家/地区时，所有国家/地区选择都是隐藏的，并且所选国家/地区的一个城市选择是可见的，但它在屏幕加载时不起作用。 我只会在 2 个国家/地区显示，但还有更多，代码对其他国家/地区相同 - 只是要隐藏更多字段。

add_action("wp_footer", "add_script_update_shipping_method");
function add_script_update_shipping_method()
{
    if (is_checkout()) { ?>

    <script>
    jQuery(document).ready(function($) {
        jQuery('select#billing_city_ua,select#billing_city_pl').select2();

        /* DIDN'T HELP

         jQuery(window).on('load', function () { 
         var countryval =  jQuery('#billing_country option:selected').val();                    
               jQuery('#billing_country').val(countryval);      
       });

        TO COPY ALL STRINGS FROM CHANGE TOO
       */

        $(document.body).on('updated_checkout updated_shipping_method', function(event, xhr, data) {

            $('input[name^="shipping_method"]').on('change', function() {
                $('.woocommerce-billing-fields__field-wrapper').block({
                    message: null,
                    overlayCSS: {
                        background: '#fff',
                        'z-index': 1000000,
                        opacity: 0.3
                    }
                });
            });


            jQuery('select#billing_country').on('change', function() {
                jQuery('select#billing_city_ua, select#billing_city_pl, p#billing_city_field input').val('');
                if (jQuery(this).val() == "UA") {
                    jQuery('select#billing_city_pl').addClass('d-none').removeClass('d-flex').closest('p').hide();
                    jQuery('select#billing_city_ua').addClass('d-flex').removeClass('d-none').closest('p').show();
                }
                if (jQuery(this).val() == "PL") {
                    jQuery('select#billing_city_ua').addClass('d-none').removeClass('d-flex').closest('p').hide();
                    jQuery('select#billing_city_pl').addClass('d-flex').removeClass('d-none').closest('p').show();
                }

            });


            jQuery("select#billing_city_ua").on("change", function(e) {
                let cityval = jQuery("select#billing_city_ua").val();
                jQuery(this).find('.woocommerce-billing-fields__field-wrapper p#billing_city_field>span>input').val(cityval);
            });
            jQuery("select#billing_city_pl").on("change", function(e) {
                let cityval = jQuery("select#billing_city_pl").val();
                jQuery(this).find('.woocommerce-billing-fields__field-wrapper p#billing_city_field>span>input').val(cityval);
            });



            var first_name = $('#billing_first_name').val(),
                last_name = $('#billing_last_name').val(),
                phone = $('#billing_phone').val(),
                email = $('#billing_email').val(),
                city = $('#billing_city').val(),
                cityua = $('#billing_city_ua').val(),
                citypl = $('#billing_city_pl').val(),
                address = $('#billing_address_1').val(),
                postcode = $('#billing_postcode').val(),
                country = $('#billing_country').val();

            $(".woocommerce-billing-fields__field-wrapper").html(xhr.fragments[".woocommerce-billing-fields"]);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_first_name"]').val(first_name);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_last_name"]').val(last_name);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_phone"]').val(phone);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_email"]').val(email);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_city"]').val(city);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_city_ua"]').val(cityua);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_city_pl"]').val(citypl);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_postcode"]').val(postcode);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_country"]').val(country);
            $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_address_1"]').val(address);
            $('.woocommerce-billing-fields__field-wrapper').unblock();
        });
    });
    </script>
    <?php }
}

我尝试了很多技巧 - 在身体变化时触发变化事件，甚至在悬停或滚动时只是为了测试。所有国家/地区选择在页面加载时都可见，当您选择国家/地区时，一切正常。我想在加载时重新选择已选择的值 - 也使用 cityval。要从头开始复制所有代码，请在 xhr 函数无济于事之前更改代码。正确的方法是什么？

已编辑 - 添加了代码 如何添加城市选择字段

add_filter( 'woocommerce_checkout_fields' , 'dropdown' );

// Our hooked in function - $fields is passed via the filter!
function dropdown( $fields ) {
     $fields['billing']['billing_city_ua'] = array(
    'label'     => __('City', 'woocommerce'),
    'placeholder'   => _x('billing_city_ua', 'Select your city', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide cities-select'),
    'clear'     => true,
    'type'      => 'select',
  'priority'   => 88,
     'options'     => array(
         '' => __('Select city', 'woocommerce' ),
        'City1' => __('City1', 'woocommerce' ),
        'City2' => __('City2', 'woocommerce' ),
        'City3' => __('City3', 'woocommerce' ),
        'City4' => __('City4', 'woocommerce' ),
        )
     ); 

   $fields['billing']['billing_city_pl'] = array(
    'label'     => __('City', 'woocommerce'),
    'placeholder'   => _x('billing_city_pl', 'Select your city', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide cities-select'),
    'clear'     => true,
    'type'      => 'select',
  'priority'   => 88, 
        'options'     => array(
         '' => __('Select city', 'woocommerce' ),
        'City1' => __('City1', 'woocommerce' ),
        'City2' => __('City2', 'woocommerce' ),
        'City3' => __('City3', 'woocommerce' ),
        'City4' => __('City4', 'woocommerce' ),
        )
     );    


     return $fields;
}