Google Translate

Google Translate <select> onchange event trigger

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Google Translate</title>
  </head>

  <body>
    <h1>Hello</h1>
    <div id="google_translate_element">
    </div>
    <button onclick="changeLanguage()">Change to Spanish</button>
    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </body>

</html>

CSS

body {
  top: 0px !important;
}

#google_translate_element {
  display: none;
}

.skiptranslate {
  display: none;
}

JavaScript

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
      pageLanguage: 'de'
    },
    'google_translate_element'
  );
}

const triggerEvent = (element, eventName) => {
  const event = new Event(eventName);
  element.dispatchEvent(event);
};

function changeLanguage() {
  $('.goog-te-combo').val("es");
  triggerEvent(document.querySelector('.goog-te-combo'), 'change');
}