如何使語言下拉選擇也留在下一頁？

Question

我正在使用此代碼更改按鈕的超鏈接，現在我希望如果該人選擇一種語言（例如法語），那么它將在下一頁打開時自動選擇。 如果我從 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); });

Answer 1

最新答案

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>

...在每一頁上

Answer 2

在下一頁上，您需要閱讀 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 ) 或服務器中。

如何使語言下拉選擇也留在下一頁？

問題描述

2 個解決方案

解決方案1
1 2020-04-19 14:57:59

解決方案2
0 2020-04-19 15:06:11

如何使語言下拉選擇也留在下一頁？

問題描述

2 個解決方案

解決方案1 1 2020-04-19 14:57:59

解決方案2 0 2020-04-19 15:06:11

解決方案1
1 2020-04-19 14:57:59

解決方案2
0 2020-04-19 15:06:11