How to change google translator select language text in coding

Question

I am using the google translator in my website, I want to change the select language text in the drop down. Anyone suggest for this. Here is my code;

function googleTranslateElementInit() {
       new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

Thanks in advance.

I would suggest not to change the text of dropdown. Instead use custom button or link for functionality. have a look at this stack thread. http://stackoverflow.com/questions/1565887/jquery-how-to-stop-ajax-function-escaping-json-string-used-to-post-data — Prashant Kabade, Mar 29 '16 at 10:46

Mosh Feu · Accepted Answer · 2018-02-13T10:40:01.383

According to this question you can modify the element as you want.

Like this:

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({  
      pageLanguage: 'en', 
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
  $(document).ready(function(){
    $('#google_translate_element').bind('DOMNodeInserted', function(event) {
      $('.goog-te-menu-value span:first').html('Translate');
      $('.goog-te-menu-frame.skiptranslate').load(function(){
        setTimeout(function(){
          $('.goog-te-menu-frame.skiptranslate').contents().find('.goog-te-menu2-item-selected .text').html('Translate');    
        }, 100);
      });
    });
  });
</script>

http://output.jsbin.com/jucoba

Hi thanks Mosu.. Its working. But in the drop down, 2 select language text are there, From your script 1st one is changed, and 2nd one which is placed after click on the drop down, that too want to change. — Lavanya, Mar 29 '16 at 10:56

Malik Omonov · Answer 2 · 2021-09-04T23:14:26.220

I spent a lot of time trying to get rid of "RangeError: Maximum call stack size exceeded." error. Here is the solution I came up with. Just assign a new value to yourContent variable and you are ready to go. Hope someone will find this helpful.

    var targetElement = document.getElementById("google_translate_element");
    var yourContent = "Your text or <br /> HTML element"
    targetElement.addEventListener("DOMNodeInserted", () => {
      $(".goog-te-menu-value span:first").each(function (i, obj) {
        if (obj.childNodes[0] && obj.childNodes[0].textContent == "Select Language") {
          $(obj).html(yourContent);
        }
      });
    });

Also, if you want to add image instead of text, you will need to add the following css to clean up unnecessary borders:

.goog-te-menu-value span:nth-child(3), 
.goog-te-menu-value span:nth-child(5), 
.goog-te-gadget-icon, 
.goog-te-banner-frame.skiptranslate {
    display:none !important;
  }

div#google_translate_element div.goog-te-gadget-simple {
    border: none;
    background-color: transparent;
}

How to change google translator select language text in coding

2 Answers2