Avant
J'ai créé un site Web pour passer de l'anglais au néerlandais en cliquant simplement sur un lien hypertexte, c'est-à-dire <a>
J'avais 2 fichiers; de.php et en.php avec les structures suivantes;

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"
    );
?>

Pour charger une langue spécifique. L'utilisateur n'a qu'à cliquer sur l'hyperlien

<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">
  .....

Maintenant , je dois ajouter d'autres langues comme le français, le portugais et l'espagnol. alors j'ai préparé
fr.php, pt.php et sp.php » fr.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"
  );

Etc pour pt.php et sp.php

Faire en sorte que les utilisateurs utilisent des liens pour charger la langue de leur choix n'est pas si professionnel et peut être un cluster du site Web. Alors recouru à l'utilisation de la balise 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>

Comment faire pour que si un utilisateur sélectionne une langue particulière dans le menu déroulant, la page index.php charge les sp.php et pt.php ou en.php ou fr.php en conséquence?

Ai-je besoin d'AJAX pour cela car la page devra se recharger sans que l'utilisateur ait à soumettre ou à bouton? De toute évidence, il y a un bouton de soumission.

Vous pouvez visiter www.betensured.com pour voir le comportement recherché.
Observez comment la page change lors de la sélection d'une autre langue dans le menu déroulant.

1
Henry Popee Nnonyelu 1 sept. 2020 à 14:13

2 réponses

Meilleure réponse

Voici ce que j'ai fait dans un projet

<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>

À la racine du projet, j'avais mes sections de langues (/ fr /, / en /, / esp / ...) chaque répertoire contient un fichier index.php, donc lorsque je sélectionne mon option de langue, le selected_language / index.php est chargé

1
Mister Jojo 1 sept. 2020 à 11:43

Si ça aide ...

(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>
1
Mister Jojo 1 sept. 2020 à 14:27