Woocommerce 将邮政编码更改为下拉菜单

Question

我正在尝试更改结帐页面中的邮政编码并将其限制为特定选项，因此我使用了此代码

// 挂钩 add_filter('woocommerce_default_address_fields','custom_override_default_address_fields');

// 我们的挂钩函数 - $fields 通过过滤器传递！ 函数 custom_override_default_address_fields($address_fields) {

// Just changing what is needed to turn it into a select.
// Modify other options if you need.
$address_fields['postcode']['type'] = 'select';
$address_fields['postcode']['options'] = array('12652' => "Area 1",
                                               '21511' => "Area 2",
                                               '42511' => "Area 3");

$address_fields['postcode']['default'] =12652;

return $address_fields;

实际上一切都很好，但主要问题是我用它来计算运费但没有更新的选项值.. 我正在寻找 js 的东西来获取邮政编码的选择器，但我找不到或解决这个问题..有什么帮助吗？

Answer 1

#[ FIXED ]
Here is what i did and it worked fine with me..


Step 1 => add this filter in order to add new field in checkout form.

    add_filter( 'woocommerce_checkout_fields' , 'add_address_type_field' );
    function add_address_type_field( $fields ) {

     $address_type_field = array(
        'type'      => 'select',
        'required'  => false,
        'class'     => array('address-field', 'form-row-wide', 'validate-addresstype'),
        'clear'     => true,
        'options'   => array(
                        'postCode' => 'Area 1',
                        'postCode' => 'Area 2',
                    ),
     );

     $fields['billing']['billing_address_type']   = $address_type_field;

     return $fields;
    }



Step 2 => using css to hide default postal code input 



#billing_postcode{
   display:none;    
}


Step 3 => using JavaScript Events to make eventlistener 'Change' .. once the select value change event assign this value to default post code input by adding this code in form-billing.php


document.querySelector('#billing_address_type').addEventListener("change", function(){
        document.querySelector('input#billing_postcode').value = 
        document.querySelector('#billing_address_type').value;
        jQuery('body').trigger('update_checkout');
    });