WooCommerce结账页账单State（州/省）选择值无法同步到收货地址问题

核心错误点 #

• 选择器使用错误：:selected 是专门用于筛选<select>元素下<option>子元素的选择器，直接作用在<select>元素本身筛选不到任何有效对象，是赋值失效的核心原因。
• 赋值方向问题：现有代码逻辑是将收货地址的州/省值赋值给账单地址，如果你要实现的是「勾选复选框后账单地址同步到收货地址」的需求，赋值方向完全相反。
• 缺少事件触发：WooCommerce的州/省字段是动态关联字段，修改值后需要主动触发change事件，才能唤醒WooCommerce内置的地址校验、运费计算等关联逻辑。

正确实现代码 #

WooCommerce结账页默认的「收货地址与账单不同」复选框name为ship_to_different_address，完整同步逻辑参考如下：

// 监听复选框变更事件
jQuery('input[name="ship_to_different_address"]').on('change', function() {
  // 未勾选时执行同步逻辑
  if(!jQuery(this).is(':checked')) {
    // 取账单地址州/省值
    const billingStateVal = jQuery('[name="billing_state"]').val();
    // 赋值给收货地址州/省字段后主动触发change事件
    jQuery('[name="shipping_state"]').val(billingStateVal).trigger('change');
  }
})

如果你的需求确实是将收货地址的州/省值同步到账单地址，调整对应字段名和赋值方向即可。

额外适配建议 #

如果遇到页面动态刷新后逻辑失效的问题，可以把逻辑绑定到WooCommerce专属的updated_checkout事件上，适配结账页的异步刷新场景：

jQuery(document).on('updated_checkout', function() {
  // 将上面的同步逻辑放在此处即可
})

该写法同时适配州/省字段为下拉框、输入框两种场景，兼容不同地区的字段展示规则。

内容的提问来源于stack exchange，提问作者user14907549