电商站点Drop-down currency selector切换后顶部货币显示未更新求助

看起来你遇到的核心问题是：尽管货币已经成功切换，但顶部的current-currency区域始终显示默认的“United Kingdom”。这是因为你的JavaScript代码只在页面加载时读取了<select>元素的初始选中值，而当你通过表单提交或点击下拉列表的链接切换货币后，页面刷新时：

1. 你的<select>元素并没有根据当前实际生效的货币更新selected属性
2. JS也没有从URL参数或后端会话中获取当前真正的货币值，依然沿用了初始的默认值

下面是两种针对性的解决方案：

方案1：通过URL参数获取当前货币值（适合GET请求场景） #

如果你的货币切换是通过URL参数传递的（比如点击链接时的?currency=X），可以修改JS代码，优先从URL中读取当前货币值，再更新显示内容和<select>的选中状态：

<script>
// 工具函数：从URL参数中获取指定参数的值
function getUrlParam(paramName) {
    const regex = new RegExp(`[\\?&]${paramName}=([^&#]*)`);
    const match = regex.exec(window.location.search);
    return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : '';
}

// 获取当前货币值：优先取URL参数，没有则取select默认选中值
let currentCurrency = getUrlParam('currency');
if (!currentCurrency) {
    currentCurrency = $(".currency select option:selected").val();
}

// 根据货币值更新显示内容和select选中状态
switch(currentCurrency) {
    case '1':
        $(".current-currency span").html('<i class="fa fa-gbp"></i> United Kingdom');
        $(".currency select option[value='1']").prop('selected', true);
        break;
    case '2':
        $(".current-currency span").html('<i class="fa fa-eur"></i> Europe');
        $(".currency select option[value='2']").prop('selected', true);
        break;
    case '3':
        $(".current-currency span").html('<i class="fa fa-usd"></i> United States');
        $(".currency select option[value='3']").prop('selected', true);
        break;
}

// 下拉菜单切换逻辑保留
$(".current-currency").click(function() {
    $(".currency ul").slideToggle("fast");
});
</script>

另外，如果你希望表单提交后URL也带上货币参数，可以把表单的method从post改成get：

<form method="get" action="/" name="lancur">

方案2：后端渲染时设置正确的初始状态（更可靠的方案） #

最根本的解决方式是让后端在渲染页面时，根据当前用户会话中保存的货币值，直接设置好：

1. <select>元素中对应货币选项的selected属性
2. current-currency区域的初始HTML内容

举个例子，如果当前生效的货币是欧元（EUR，value=2），后端应该输出的HTML如下：

<!-- 正确设置select的选中状态 -->
<select name="currency" style="width: 100%" onchange="lancur.submit();">
    <option selected="" value="2">Euro (EUR)</option>
    <option value="1">Sterling (GBP)</option>
    <option value="3">US Dollar (USD)</option>
</select>

<!-- 正确设置当前货币显示 -->
<div class="current-currency"><span><i class="fa fa-eur"></i> Europe</span> <i class="fa fa-angle-down"></i></div>

这种方式下，即使JavaScript失效，页面也能正确显示当前货币，你的原有JS代码也能读取到正确的选中值，无需额外修改。

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