使用 HTML Select 标签在多语言网站中切换语言

Question

前
我有一个网站，只需单击超链接即可从英语切换到荷兰语，即<a>
我有 2 个文件； de.php和en.php具有以下结构；

de.php

<?php
  $lang = array(
    "title" => "hengst Bank, bankieren kredietkaarten, Leningen en Merill Investeren www.stallionbank.com",
    "titleUserAccount"=>"Gebruikers account|Stallion Bank",
    "Home" => "Huis",
    "lang_en"=>"Engels",
    "lang_de"=>"Dutch"
    );
?>

en.php

<?php
  $lang = array(
    "title" => "Stallion Bank&mdash; Banking, credit cards,Loans and Merill Investing www.stallionbank.com",
    "titleUserAccount"=>"User Account|Stallion Bank",
    "lang_en"=>"English",
    "lang_de"=>"Dutch"
    );
?>

加载特定语言。 用户只需点击超链接

<a href="index.php?lang=en"><?php echo $lang['lang_en']?></a>
<a href="index.php?lang=de"><?php echo $lang['lang_de']?></a>

index.php

<head>
  <title><?php echo $lang['title']?></title>
  <meta charset="utf-8">
  .....

现在，我需要添加其他语言，例如法语、葡萄牙语和西班牙语。 所以我准备了
fr.php ， pt.php和sp.php

<?php

$lang = array(
  "title" => "Stallion Bank&mdash; bancaire, cartes de crédit,Prêts et Merill Investing www.stallionbank.com",
  "titleUserAccount"=>"Compte d'utilisateur|Stallion Bank",
  "lang_en"=>"Anglaise",
  "lang_fr"=>"French"
  );

pt.php和sp.php等

让用户使用链接加载他们选择的语言不是很专业，可能会把网站聚集在一起。
所以求助于使用 select 标签。

index.php

<div align = "left">
  <select  name="lang" id="lang" onChange="window.location='index.php?lang='+this.value">
    <option value="en" <?php if( $lang =='en'){echo "selected";}?>>English</option>
    <option value="fr" <?php if( $lang =='fr'){echo "selected";}?>>French</option>
    <option value="de" <?php if( $lang =='de'){echo "selected";}?>>Dutch</option>
    <option value="sp" <?php if( $lang =='sp'){echo "selected";}?>>Spanish</option>
    <option value="pt" <?php if( $lang =='pt'){echo "selected";}?>>Portugese</option>
  </select>

我 go 如何解决这个问题，以便如果用户从下拉菜单中选择特定语言，index.php 页面将相应地加载相应的sp.php或pt.php或en.php或fr.php ？

我是否需要 AJAX，因为页面必须重新加载而无需用户提交或按钮？显然，有提交按钮。

您可以访问www.betensured.com查看我正在寻找的行为。
从下拉菜单中选择不同的语言后，观察页面如何变化。

Answer 1

这是我在一个项目中所做的

<li class="lang">
  <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);" 
          class="lang-selector">
    <option value="../en" class="lang-option">
      <a hreflang="EN" rel="alternate">En</a>
    </option>
    <option value="../fr/" class="lang-option" selected>
      <a hreflang="FR" rel="alternate">Fr</a>
    </option>
  </select>
</li>

在项目的根目录下，我有我的语言部分（/fr/、/en/、/esp/...），每个目录都包含一个 index.php 文件，所以当我 select 我的语言选项时，selected_language/index.php 是加载

Answer 2

如果有帮助...

 (function() // IIFE { const defaultLang = 'en', langSelector = document.getElementById('lang-select'), htmlTag = document.querySelector('html'), langElms = [...document.querySelectorAll('*[lang]')], docTitle = { en: 'English document title', fr: 'Titre Français pour le document ' } // remove <html lang="en"> from langElms let i_html = langElms.findIndex(el=>el===htmlTag) if (i_html>-1) langElms.splice(i_html,1) // set initial language according to browser language, or default Lang if this none of site languages let initLang = (navigator.language || navigator.userLanguage || defaultLang).substring(0,2) if (.docTitle[initLang]) initLang = defaultLang langSelector.value = initLang showLang() function showLang() { let lang = langSelector.value htmlTag.lang = lang document.title = docTitle[lang] langElms.forEach(el=> { if (el.lang===lang) el.classList.remove('noDisplay') else el.classList.add('noDisplay') }) } // the final touch ! langSelector.onchange = showLang })()

 .noDisplay { display: none;important: } /* cosmetic part */ div { display; inline-block: border; 1px solid grey: margin. ;5em: padding. ;5em; }

 <select id="lang-select"> <option value="en">English</option> <option value="fr">Français</option> </select> <p lang="fr">ce paragraphe est en Français</p> <p lang="en">this paragraph is in English</p> <div lang="fr">ce block est en Français</div> <div lang="en">this block is in English</div>

使用 HTML Select 标签在多语言网站中切换语言

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-09-01 11:23:21

解决方案2
1 2020-09-01 14:10:05

使用 HTML Select 标签在多语言网站中切换语言

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-09-01 11:23:21

解决方案2 1 2020-09-01 14:10:05

解决方案1
1 已采纳 2020-09-01 11:23:21

解决方案2
1 2020-09-01 14:10:05