如何实现jQuery结算页国家切换触发货币重定向后下拉选值同步

你遇到的下拉框状态不匹配问题，本质是跳转前的DOM修改会被重载的新页面完全丢弃：

• 原有代码中对下拉框赋值、表单字段显隐的操作，都是在跳转前的当前旧页面上执行的
• 一旦触发location.href跳转，浏览器会放弃当前页面的所有未持久化DOM修改，加载全新的结算页
• 现有跳转链接只携带了currency参数，没有把用户选中的目标国家值传递给新页面，新页面加载时自然读不到要同步的国家值，就会显示之前缓存的RU状态
• 另外原代码还存在隐藏逻辑bug：两个连续独立的if判断，会导致选中UA时，执行完UA分支的跳转逻辑后，继续走到第二个if的else分支，触发USD的跳转覆盖，实际无法正常跳转到UAH的页面

整体逻辑拆成两部分：

1. 触发跳转时，除了原有currency参数，把用户本次选中的国家值同步拼接到URL参数中
2. 新页面加载完成后，从URL中读取携带的国家值，再完成下拉框选中值同步、表单字段显隐、支付方式选择的操作，完全替换原来跳转前改DOM的无效逻辑

优化后完整代码 #

$(document).ready(function() {
  // 通用URL参数解析方法
  function getUrlParam(paramName) {
    const searchStr = window.location.search.slice(1);
    const paramList = searchStr.split('&');
    for (let i = 0; i < paramList.length; i++) {
      const [key, value] = paramList[i].split('=');
      if (key === paramName) return decodeURIComponent(value);
    }
    return '';
  }

  // 按国家应用对应的表单/支付规则
  function applyCountryRule(countryCode) {
    const codMethod = $("li.wc_payment_method.payment_method_cod");
    const lastNameField = $("p#billing_last_name_field");
    const streetField = $("p#billing_street_field");
    const houseField = $("p#billing__house_field");
    const appartField = $("p#billing_appartement_field");
    const interkassaRadio = $('input:radio[name=payment_method][value=interkassa]');

    // 先重置为默认状态
    codMethod.hide();
    lastNameField.hide();
    streetField.show();
    houseField.show();
    appartField.show();
    interkassaRadio.prop('checked', true);

    // 匹配乌克兰的特殊规则
    if (countryCode === 'UA') {
      codMethod.show();
      lastNameField.show();
      streetField.hide();
      houseField.hide();
      appartField.hide();
    }
  }

  // 页面初始化：从URL读取参数同步状态
  const syncCountry = getUrlParam('billing_country');
  if (syncCountry) {
    // 同步下拉框选中值
    $("select#billing_country").val(syncCountry);
    // 应用对应国家的显示规则
    applyCountryRule(syncCountry);
  }

  // 绑定下拉框切换事件
  $("select#billing_country").change(function() {
    const selectedCountry = $(this).val();
    // 货币映射
    const currencyMap = {
      UA: 'UAH',
      RU: 'RUB'
    };
    const targetCurrency = currencyMap[selectedCountry] || 'USD';
    // 跳转时同时携带货币和选中的国家参数
    window.location.href = `https://www.fashiondance.in.ua/checkout/?currency=${targetCurrency}&billing_country=${selectedCountry}`;
  });
});

• 跳转前不需要再执行任何DOM显隐、下拉框赋值操作，这些操作在旧页面上的修改会随着页面重载被完全清除，没有实际效果
• 修正了原代码的连续if判断逻辑，改成映射+互斥判断的结构，避免之前出现的分支覆盖、重复触发跳转的问题
• 后续新增国家规则时，只需要在货币映射表、applyCountryRule函数中补充对应逻辑即可，不需要重复书写冗余的DOM操作代码

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