Using the HTML Select tag to switch between languages in a multilingual website
Question
Before
I have a website that i built to switch from English to Dutch just by clicking on a hyperlink ie <a>
I had 2 files; de.php and en.php with following structures;
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— 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
<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 preparedfr.php , pt.php and sp.php ` fr.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
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.
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?
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.
You can visit www.betensured.com to see the behaviour am looking for.
Observe how the page changes upon selecting a different language from the drop-down menu.
2 answers
solution1
1 ACCPTED 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
solution2
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.