JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.6.0.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<select>
<option class="dropdown-item languageOption selectedLang" href="javascript:void(0)" data-lang="en" data-text="English"> English</option>
<option class="dropdown-item languageOption notSelectedLang" href="javascript:void(0)" data-lang="es" data-text="Espanol"> Espanol</option>
<option class="dropdown-item languageOption notSelectedLang" href="javascript:void(0)" data-lang="fr" data-text="French"> French</option>
</select>
<div id='google_translate_element'></div>
<div>
Some Text here which you needs to translate using Google Javascript.
</div>
CSS
body{
top:0 !important;
}
.goog-te-banner-frame {
display: none;
height: 0 !important;
visibility: hidden
}
#google_translate_element {
display: none;
}
JavaScript
function googleTranslateElementInit() {
new google.translate.TranslateElement({ includedLanguages: 'en,es,fr,pt', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element');
}
function triggerHtmlEvent(element, eventName) {
var event;
if (document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventType = eventName;
element.fireEvent('on' + event.eventType, event);
}
}
$(document).ready(function () {
$(document).on('click', '.languageOption', function () {
var value = $(this).attr("data-lang");
updateLanguage(value);
})
function updateLanguage(value) {
var selectIndex = 0;
var a = document.querySelector("#google_translate_element select");
switch (value) {
case "en":
selectIndex = 0;
break;
case "es":
selectIndex = 3;
break;
case "fr":
selectIndex = 1;
break;
case "pt":
selectIndex = 2;
break;
}
a.selectedIndex = selectIndex;
a.dispatchEvent(new Event('change'));
}
})