如何使语言下拉列表也保留在下一页

我正在使用此代码更改按钮的超链接，现在我希望如果用户选择了一种语言，例如法语，则在下一页打开时会自动选择该语言。如果我从page1.php转到page2.php。下一页的语言应该自动选择为法语。有人能告诉我怎么做吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="custom.js">
</script>

<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>
<a href="" id="theButton">Click</a>

<a href="test2.php">Click</a>
</body>
</html>

$(document).ready(function(){
var saveclass = null;
function onChangeHandler() {
const lang = document.querySelector('#lang').value;
const currency = document.querySelector('#currency').value;
var strLink = "https://example.com/index.php?lang="+lang+"&currency="+currency;
document.querySelector('#theButton').setAttribute('href', strLink);
}
onChangeHandler();
document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);
});

最新答案

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
<script type="text/javascript" src="cookie_script.js"></script>
</head>
<body>
<select name="" id="lang">
<option <?php if(@$_COOKIE['lang']=="English"){ echo "selected"; }?> value="English">English</option>
<option <?php if(@$_COOKIE['lang']=="French"){ echo "selected"; }?> value="French">French</option>
<option <?php if(@$_COOKIE['lang']=="Spanish"){ echo "selected"; }?> value="Spanish">Spanish</option>
</select>
<select name="" id="currency">
<option <?php if(@$_COOKIE['currency']=="USD"){ echo "selected"; }?> value="USD">USD</option>
<option <?php if(@$_COOKIE['currency']=="EUR"){ echo "selected"; }?> value="EUR">EUR</option>
<option <?php if(@$_COOKIE['currency']=="MXN"){ echo "selected"; }?> value="MXN">MXN</option>
</select>
<a href="test2.php">Click</a>
</body>
</html>

cookie_script.js

$(document).ready(function(){
$('#lang').on('change', function(){ document.cookie = "lang="+$(this).val()+"; path=/"; });
$('#currency').on('change', function(){ document.cookie = "currency="+$(this).val()+"; path=/"; });
});

始终包括

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="cookie_script.js"></script>

。。。每页

在下一页上，您需要读取URL，并使用获得的值更新货币和语言下拉列表。

根据这篇文章：如何在JavaScript中获取查询字符串值？您应该使用URLSearchParams。

步骤1-从URL中获取所选的语言和货币值。

const urlParams = new URLSearchParams(window.location.search);
const language = urlParams.get('lang');
const currency = urlParams.get('currency');

步骤2-使用值更新下拉列表：

$('#lang').val(language);
$('#currency').val(currency);

如果你不想在每个页面上都这样做，你可以将这些设置保存在客户端的机器(localStorage(或服务器中。

相关内容

最新更新

热门标签：