Woocommerce结账-如何使select2和xhr更新协同工作

Question

我使用城市列表作为选择

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

// Define here in the array your desired cities (Here an example of cities)
$option_cities = array(
'' => __( 'Select city' ),
'City1' => 'City1',
'City2' => 'City2',
);

$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;
return $fields;
}

我还更新了结账表格数据

add_action( 'wp_footer', 'awoohc_add_script_update_shipping_method' );
function awoohc_add_script_update_shipping_method() {
if ( is_checkout() ) {
?>
<script>
jQuery(document).ready(function ($) {
$(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
}
});
$('select#billing_city').select2();     
});
var first_name = $('#billing_first_name').val(),                      
phone = $('#billing_phone').val(),
email = $('#billing_email').val(),
city = $('#billing_city').val(),                        
address_1 = $('#billing_address_1').val(),                                              
$(".woocommerce-billing-fields__field-wrapper").html(xhr.fragments[".woocommerce-billing-fields"]);
$('select#billing_city').select2(); /*THERE IS THE PROBLEM!!!!!*/   
$(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_first_name"]').val(first_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_address_1"]').val(address_1);                                                 
$('.woocommerce-billing-fields__field-wrapper').unblock();                                  
});
});

</script>
<?php
}
}

我注意到问题出在哪里了如果我不把select2((粘贴到那里，select看起来像简单的select，而不是select2。但是，如果我试图更改或删除地址，例如，当它是一个错误的字母时，所有表单都开始更新，不会保存50%的新值，并且在页面顶部显示另一个城市选择的地址，不允许更改任何内容。我测试了代码的许多部分，冲突就在这里——select2和购物车的xhr更新之间。如何修复它？我们需要地址更新和选择2

Answer 1

尝试

$('select#billing_city').selectWoo();

在这里你可以看到关于它的完整文档