使用 HTML Select 标签在多语言网站中切换语言
[英]Using the HTML Select tag to switch between languages in a multilingual website
问题描述
Before
前
I have a website that i built to switch from English to Dutch just by clicking on a hyperlink ie <a>我有一个网站，只需单击超链接即可从英语切换到荷兰语，即<a>
I had 2 files;我有 2 个文件； de.php and en.php with following structures; de.php和en.php具有以下结构；
de.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 en.php
<?php
$lang = array(
"title" => "Stallion Bank— Banking, credit cards,Loans and Merill Investing www.stallionbank.com",
"titleUserAccount"=>"User Account|Stallion Bank",
"lang_en"=>"English",
"lang_de"=>"Dutch"
);
?>
To load a specific language.加载特定语言。 User only has to click on the hyperlink用户只需点击超链接
<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 index.php
<head>
<title><?php echo $lang['title']?></title>
<meta charset="utf-8">
.....
Now , there's need for me to add other languages such as french, portugese and spanish.现在，我需要添加其他语言，例如法语、葡萄牙语和西班牙语。 so I prepared所以我准备了fr.php , pt.php and sp.php ` fr.php fr.php ， pt.php和sp.php
<?php
$lang = array(
"title" => "Stallion Bank— 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"
);
etc for pt.php and sp.php pt.php和sp.php等
having users using links to load lnaguage of their choice isnt so professional and may be cluster the website.让用户使用链接加载他们选择的语言不是很专业，可能会把网站聚集在一起。
So resorted to using select tag.所以求助于使用 select 标签。
index.php 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>
How do I go about this so that if a user selects a particular langauge from the drop down menu, the index.php page will load the corresponding sp.php or pt.php or en.php or fr.php accordingly?我 go 如何解决这个问题，以便如果用户从下拉菜单中选择特定语言，index.php 页面将相应地加载相应的sp.php或pt.php或en.php或fr.php ？
Do I need AJAX for this as the page will have to reload without user having to submit or button?Obviously, there is submit button.我是否需要 AJAX，因为页面必须重新加载而无需用户提交或按钮？显然，有提交按钮。
You can visit www.betensured.com to see the behaviour am looking for.您可以访问www.betensured.com查看我正在寻找的行为。
Observe how the page changes upon selecting a different language from the drop-down menu.从下拉菜单中选择不同的语言后，观察页面如何变化。
2 个解决方案
解决方案1
1 已采纳 2020-09-01 11:23:21
Here's what I've done in a project这是我在一个项目中所做的
<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>
At the root of the project I had my languages sections (/fr/, /en/, /esp/...) each directory contain an index.php file, so when I select my language option the selected_language/index.php is loaded在项目的根目录下，我有我的语言部分（/fr/、/en/、/esp/...），每个目录都包含一个 index.php 文件，所以当我 select 我的语言选项时，selected_language/index.php 是加载
解决方案2
1 2020-09-01 14:10:05
If it helps...如果有帮助...
(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.