javascript - google translate dropdown - set the language option label in that language itself - Stack Overflow

admin管理员组

文章数量:1401849

I have used google translate element with code:

<div id="google_translate_element"></div>
function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en'
    }, 'google_translate_element');
}
<script type="text/javascript" src="//translate.google/translate_a/element.js?cb=googleTranslateElementInit">

This gives me standard language selector dropdown with english labels.

How can I customize the language label to be in that language itself? The result that I want is:

<select>
<option selected="selected" value="">select</option>
<option value="af">Afrikaans</option>
<option value="sq">shqip</option>
<option dir="ltr" value="ar">العربية</option>
<option value="be">Беларуская</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="zh-CN">中文(简体)</option>
<option value="zh-TW">中文(繁體)</option>
<option value="hr">Hrvatska</option>
<option value="cs">česky</option>
<option value="da">Dansk</option>
<option value="nl">Nederlands</option>
<option value="et">Eesti</option>
<option value="tl">Filipino</option>
<option value="fi">suomi</option>
<option value="fr">Français</option>
<option value="gl">Galego</option>
<option value="de">Deutsch</option>
<option value="el">Ελληνικά</option>
<option dir="ltr" value="iw">עברית</option>
<option value="hi">हिन्दी</option>
<option value="hu">magyar</option>
<option value="is">Íslenska</option>
<option value="id">Indonesia</option>
<option value="ga">Gaeilge</option>
<option value="it">Italiano</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
....
</select>

UPDATE I though of replacing the innerHTML of the google-generated select

var googleDropdown = $("#google_translate_element .goog-te-bo");
var customDropdown = $("#custom-translate");
googleDropdown.innerHTML = customDropdown.innerHTML;

The custom select:

<select id="custom-translate" style="display:none;">
  <option value="">Select Language</option>
  <option value="af">Afrikaans</option>
  <option value="sq">Albanian</option>
  <option value="am">Amharic</option>
  <option value="ar">Arabic (العربية)</option>
  ...
</select>

This works when I try it on the console when everything is loaded, but when I add this code in file, the problem is googleTranslateElementInit executes in the end.

So how do I make my code execute after the google translate is done?

I have used google translate element with code:

<div id="google_translate_element"></div>
function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en'
    }, 'google_translate_element');
}
<script type="text/javascript" src="//translate.google./translate_a/element.js?cb=googleTranslateElementInit">

This gives me standard language selector dropdown with english labels.

How can I customize the language label to be in that language itself? The result that I want is:

<select>
<option selected="selected" value="">select</option>
<option value="af">Afrikaans</option>
<option value="sq">shqip</option>
<option dir="ltr" value="ar">العربية</option>
<option value="be">Беларуская</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="zh-CN">中文(简体)</option>
<option value="zh-TW">中文(繁體)</option>
<option value="hr">Hrvatska</option>
<option value="cs">česky</option>
<option value="da">Dansk</option>
<option value="nl">Nederlands</option>
<option value="et">Eesti</option>
<option value="tl">Filipino</option>
<option value="fi">suomi</option>
<option value="fr">Français</option>
<option value="gl">Galego</option>
<option value="de">Deutsch</option>
<option value="el">Ελληνικά</option>
<option dir="ltr" value="iw">עברית</option>
<option value="hi">हिन्दी</option>
<option value="hu">magyar</option>
<option value="is">Íslenska</option>
<option value="id">Indonesia</option>
<option value="ga">Gaeilge</option>
<option value="it">Italiano</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
....
</select>

UPDATE I though of replacing the innerHTML of the google-generated select

var googleDropdown = $("#google_translate_element .goog-te-bo");
var customDropdown = $("#custom-translate");
googleDropdown.innerHTML = customDropdown.innerHTML;

The custom select:

<select id="custom-translate" style="display:none;">
  <option value="">Select Language</option>
  <option value="af">Afrikaans</option>
  <option value="sq">Albanian</option>
  <option value="am">Amharic</option>
  <option value="ar">Arabic (العربية)</option>
  ...
</select>

This works when I try it on the console when everything is loaded, but when I add this code in file, the problem is googleTranslateElementInit executes in the end.

So how do I make my code execute after the google translate is done?

• javascript
• google-translate
• language-translation
• google-translation-api
• google-translator-toolkit

Share Improve this question Follow edited Jan 13, 2021 at 14:51 K Shaikh asked Jan 13, 2021 at 12:50 K ShaikhK Shaikh 40177 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Here is my solution

I struggled with this myself for a long time. I ended up having to learn a bit of JQuery to access the iframe and edit the text in the dropdown. Once I was able to access the text element I wrote a massive switch statement to change the text of the English version of the language into its native language. I used either google translate or the apps script LanguageApp to translate the language names.

$("#google_translate_element").on("click", function () {
  var languages = $("iframe").contents().find(".text").get();
  console.log(languages);
  for (i = 0; i < languages.length; ++i) {
    var languageElem = languages[i];
    var Lang = languageElem.textContent;
    console.log(Lang);
    var nativeLang = getNativeLang(Lang);
    if (!nativeLang) {
      nativeLang = Lang;
    }
    languageElem.textContent = nativeLang;
    console.log(nativeLang);
  }
});

function getNativeLang(Lang) {
  switch (Lang) {
    case "Spanish":
      return "Español";
    case "Haitian Creole":
      return "Kreyòl Ayisyen";
    case "Portuguese":
      return "Português";
    case "Chinese (Simplified)":
      return "中文";
    case "Chinese (Traditional)":
      return "中文";
    case "Afrikaans":
      return "Afrikaans";
    case "Albanian":
      return "Shqiptar";
    case "Amharic":
      return "አማርኛ";
    case "Arabic":
      return "عربى";
    case "Armenian":
      return "Հայերեն";
    case "Azerbaijani":
      return "AzəRbaycan";
    case "Basque":
      return "Euskal";
    case "Belarusian":
      return "Беларус";
    case "Bengali":
      return "বাংলা";
    case "Bosnian":
      return "Bosanski";
    case "Bulgarian":
      return "Български";
    case "Catalan":
      return "Català";
    case "Cebuano":
      return "Cebuano";
    case "Corsican":
      return "Corsu";
    case "Croatian":
      return "Hrvatski";
    case "Czech":
      return "Čeština";
    case "Danish":
      return "Dansk";
    case "Dutch":
      return "Nederlands";
    case "Esperanto":
      return "Esperanto";
    case "Estonian":
      return "Eestlane";
    case "Filipino":
      return "Pilipino";
    case "Finnish":
      return "Suomalainen";
    case "French":
      return "Français";
    case "Frisian":
      return "Frysk";
    case "Galician":
      return "Galego";
    case "Georgian":
      return "ᲥᲐᲠᲗᲣᲚᲘ";
    case "German":
      return "Deutsche";
    case "Greek":
      return "Ελληνικά";
    case "Gujarati":
      return "ગુજરાતી";
    case "Hausa":
      return "Hausa";
    case "Hawaiian":
      return "ʻŌlelo Hawaiʻi";
    case "Hebrew":
      return "עברית";
    case "Hindi":
      return "हिन्दी";
    case "Hmong":
      return "Hmong";
    case "Hungarian":
      return "Magyar";
    case "Icelandic":
      return "Íslensku";
    case "Igbo":
      return "Ndi Igbo";
    case "Indonesian":
      return "Bahasa Indonesia";
    case "Irish":
      return "Gaeilge";
    case "Italian":
      return "Italiano";
    case "Japanese":
      return "日本語";
    case "Javanese":
      return "Basa Jawa";
    case "Kannada":
      return "ಕನ್ನಡ";
    case "Kazakh":
      return "Қазақ";
    case "Khmer":
      return "ខ្មែរ";
    case "Korean":
      return "한국어";
    case "Kinyarwanda":
      return "Ikinyarwanda";
    case "Kurdish (Kurmanji)":
      return "Kurdî";
    case "Kyrgyz":
      return "Кыргызча";
    case "Lao":
      return "ລາວ";
    case "Latin":
      return "Latine";
    case "Latvian":
      return "Latvietis";
    case "Lithuanian":
      return "Lietuvis";
    case "Luxembourgish":
      return "Lëtzebuergesch";
    case "Macedonian":
      return "Македонски";
    case "Malagasy":
      return "Malagasy";
    case "Malay":
      return "Bahasa Melayu";
    case "Malayalam":
      return "മലയാളം";
    case "Maltese":
      return "Malti";
    case "Maori":
      return "Maori";
    case "Marathi":
      return "मराठी";
    case "Mongolian":
      return "Монгол";
    case "Myanmar (Burmese)":
      return "မြန်မာ";
    case "Nepali":
      return "नेपाली";
    case "Norwegian":
      return "Norsk";
    case "Nyanja":
      return "Nyanja";
    case "Odia (Oriya)":
      return "ଓଡିଆ";
    case "Pashto":
      return "پښتو";
    case "Persian":
      return "فارسی";
    case "Polish":
      return "Polskie";
    case "Punjabi":
      return "ਪੰਜਾਬੀ";
    case "Romanian":
      return "Română";
    case "Russian":
      return "Русский";
    case "Samoan":
      return "Sāmoa";
    case "Serbian":
      return "Српски";
    case "Sesotho":
      return "Sesotho";
    case "Shona":
      return "Shona";
    case "Scots Gaelic":
      return "Gàidhlig";
    case "Sindhi":
      return "سنڌي";
    case "Sinhala":
      return "සිංහල";
    case "Slovak":
      return "Slovenský";
    case "Slovenian":
      return "Slovenščina";
    case "Somali":
      return "Soomaali";
    case "Sundanese":
      return "Urang Sunda";
    case "Swahili":
      return "Kiswahili";
    case "Swedish":
      return "Svenska";
    case "Tagalog":
      return "Tagalog";
    case "Tajik":
      return "Точик";
    case "Tamil":
      return "தமிழ்";
    case "Telugu":
      return "తెలుగు";
    case "Thai":
      return "ไทย";
    case "Turkish":
      return "Türk";
    case "Turkmen":
      return "türkmençe";
    case "Ukrainian":
      return "Українська";
    case "Urdu":
      return "اردو";
    case "Uyghur":
      return "ئۇيغۇر تىلى";
    case "Uzbek":
      return "O'Zbek";
    case "Vietnamese":
      return "TiếNg ViệT";
    case "Welsh":
      return "Cymraeg";
    case "Xhosa":
      return "Isixhosa";
    case "Yiddish":
      return "יידיש";
    case "Yoruba":
      return "Yoruba";
    case "Zulu":
      return "Isizulu";
  }
}

@margaret thank you for your response.

But I ended up using a function which sets the labels after the element is loaded. Called that function onclick of the drowdown:

<div id="google_translate_element" onclick="foo();">

function foo(){
  $("option[value='ar']").text("عربى (Arabic)");
  $("option[value='fr']").text("Français (French)");
 //.... so on
}

Google Translate Language HTML Dropdown with native language labels

<select id="tl" class="form-control" name="tl">
  <option id="languageStart" selected="selected" value="">select</option>
  <option value="af">Afrikaans</option>
  <option value="sq">shqip</option>
  <option value="am">አማርኛ</option>
  <option dir="ltr" value="ar">العربية</option>
  <option value="hy">Հայերեն</option>
  <option value="as">አማርኛ</option>
  <option value="ay">aymar aru</option>
  <option value="az">Azərbaycan</option>
  <option value="bm">bamanankan</option>
  <option value="eu">euskara</option>
  <option value="be">Беларуская</option>
  <option value="bn">বাংলা</option>
  <option value="bho">भोजपुरी</option>
  <option value="bs">bosanski</option>
  <option value="bg">български</option>
  <option value="ca">català</option>
  <option value="ceb">Cebuano</option>
  <option value="ny">njændʒə</option>
  <option value="zh-CN">中文(简体)</option>
  <option value="zh-TW">中文(繁體)</option>
  <option value="co">Corsu</option>
  <option value="hr">Hrvatska</option>
  <option value="cs">česky</option>
  <option value="da">Dansk</option>
  <option value="dv">ދިވެހި</option>
  <option value="doi">डोगरी</option>
  <option value="nl">Nederlands</option>
  <option value="eo">Esperanto</option>
  <option value="et">Eesti</option>
  <option value="ee">Eʋegbe</option>
  <option value="tl">Filipino</option>
  <option value="fi">suomi</option>
  <option value="fr">Français</option>
  <option value="fy">Frysk</option>
  <option value="gl">Galego</option>
  <option value="ka">ქართული</option>
  <option value="de">Deutsch</option>
  <option value="el">Ελληνικά</option>
  <option value="gn">guarani</option>
  <option value="gu">ગુજરાતી</option>
  <option value="ht">Kreyòl ayisyen</option>
  <option value="ha">Hausa</option>
  <option value="haw">ʻŌlelo Hawaiʻi</option>
  <option dir="ltr" value="iw">עברית</option>
  <option value="hi">हिन्दी</option>
  <option value="hmn">Hmoob</option>
  <option value="hu">magyar</option>
  <option value="is">Íslenska</option>
  <option value="ig">Igbo</option>
  <option value="ilo">Ilocano</option>
  <option value="id">Indonesia</option>
  <option value="ga">Gaeilge</option>
  <option value="it">Italiano</option>
  <option value="ja">日本語</option>
  <option value="jw">basa jawa</option>
  <option value="kn">ಕನ್ನಡ</option>
  <option value="kk">қазақ</option>
  <option value="km">ខ្មែរ</option>
  <option value="rw">Kinyarwanda</option>
  <option value="gom">कोंकणी</option>
  <option value="ko">한국어</option>
  <option value="kri">Krio</option>
  <option value="ku">Kurdî</option>
  <option value="ckb">کوردی</option>
  <option value="ky">Кыргызча</option>
  <option value="lo">ພາສາລາວ</option>
  <option value="la">Latinus</option>
  <option value="lv">latviešu valoda</option>
  <option value="ln">Lingala</option>
  <option value="lt">Lietuvių</option>
  <option value="lg">Oluganda</option>
  <option value="lb">lëtzebuergesch</option>
  <option value="mk">Македонски</option>
  <option value="mai">मैथिली</option>
  <option value="mg">Malagasy</option>
  <option value="ms">Bahasa Melayu</option>
  <option value="ml">മലയാളം</option>
  <option value="mt">Malti</option>
  <option value="mi">Maori</option>
  <option value="mr">मराठी</option>
  <option value="mni-Mtei">ꯃꯩꯇꯩꯂꯣꯟ</option>
  <option value="lus">Mizo tawng</option>
  <option value="mn">Монгол</option>
  <option value="my">မြန်မာ</option>
  <option value="ne">नेपाली</option>
  <option value="no">norsk</option>
  <option value="or">ଓଡିଆ</option>
  <option value="om">Afaan Oromoo</option>
  <option value="ps">پښتو</option>
  <option dir="ltr" value="fa">فارسی</option>
  <option value="pl">Polski</option>
  <option value="pt">Português</option>
  <option value="pa">ਪੰਜਾਬੀ</option>
  <option value="qu">Runasimi</option>
  <option value="ro">Română</option>
  <option value="ru">Русский</option>
  <option value="sm">Samoa</option>
  <option value="sa">संस्कृत</option>
  <option value="gd">Gàidhlig na h-Alba</option>
  <option value="nso">Sepedi</option>
  <option value="sr">српски</option>
  <option value="st">Sesotho</option>
  <option value="sn">Shona</option>
  <option value="sd">سنڌي(सिन्धी)</option>
  <option value="si">සිංහල</option>
  <option value="sk">slovenčina</option>
  <option value="sl">slovenščina</option>
  <option value="so">Soomaali</option>
  <option value="es">Español</option>
  <option value="su">basa Sunda</option>
  <option value="sw">Kiswahili</option>
  <option value="sv">Svenska</option>
  <option value="tg">тоҷикӣ</option>
  <option value="ta">தமிழ்</option>
  <option value="tt">Татар</option>
  <option value="te">తెలుగు</option>
  <option value="th">แบบไทย</option>
  <option value="ti">ትግሪኛ</option>
  <option value="ts">Tsonga</option>
  <option value="tr">Türkçe</option>
  <option value="tk">Türkmenler</option>
  <option value="ak">Twi</option>
  <option value="uk">українська</option>
  <option value="ur">اردو</option>
  <option value="ug">ئۇيغۇر</option>
  <option value="uz">o'zbek</option>
  <option value="vi">Tiếng Việt</option>
  <option value="cy">Cymraeg</option>
  <option value="xh">isiXhosa</option>
  <option dir="ltr" value="yi">ייִדיש</option>
  <option value="yo">Yoruba</option>
  <option value="zu">Zulu</option>
</select>

本文标签： javascriptgoogle translate dropdownset the language option label in that language itselfStack Overflow