Javascript/Jquery 在按钮单击时调用 Google 翻译（带有标志）[关闭]答案

【问题标题】：Javascript/Jquery call Google Translate on button click (with flags) [closed]Javascript/Jquery 在按钮单击时调用 Google 翻译（带有标志）[关闭]
【发布时间】：2017-12-25 04:41:16
【问题描述】：

有没有什么好的例子可以让我在 html 页面中使用谷歌翻译进行翻译？我的意思是，如果我点击德国国旗（按钮）而不是翻译成德语等......我的问题是如何为特定语言模拟这个组合框？ https://www.w3schools.com/howto/howto_google_translate.asp

谢谢

【问题讨论】：

只是提醒......我个人建议反对使用 W3school； W3Fools
亲爱的 Rushikumar，感谢您的建议，但首先我认为这很好。先生您好！ :)

标签： javascript jquery html google-translate

【解决方案1】：

您可以隐藏这个自动创建的选择字段并通过迭代每个选项字段来动态设置它的值，以搜索您可以通过输入字段选择的所需语言。

希望这会有所帮助：

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page.</p>

<!-- hide auto-created selection field completely by hiding it's container -->
<div id="google_translate_element" style="display:none"></div>

<p>You can translate the content of this page by selecting a language in the input field.</p>

<!-- flag: you can choose language here: en, de, af etc. -->
<input value="en" id="language"/>
<button onclick="changeLanguageByButtonClick()">Translate</button>

</body>
<script type="text/javascript">

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

function changeLanguageByButtonClick() {
  var language = document.getElementById("language").value;
  var selectField = document.querySelector("#google_translate_element select");
  for(var i=0; i < selectField.children.length; i++){
    var option = selectField.children[i];
    // find desired langauge and change the former language of the hidden selection-field 
    if(option.value==language){
       selectField.selectedIndex = i;
       // trigger change event afterwards to make google-lib translate this side
       selectField.dispatchEvent(new Event('change'));
       break;
    }
  }
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</html>

【讨论】：