Google翻译选择菜单索引问题：如何自动选择目标翻译语言？

你的问题核心在于：Google翻译的下拉选择框（.goog-te-combo）是异步生成的，你当前的代码在页面加载时直接执行，此时这个元素还未被Google的脚本创建出来，所以document.getElementsByClassName('goog-te-combo')返回的HTMLCollection是空的，访问select[0]自然会得到undefined。

解决方案：用MutationObserver监听元素生成 #

通过监听google_translate_element容器的DOM变化，等下拉框元素出现后再执行语言切换操作，这是最可靠的方式：

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  
<div id="google_translate_element"></div>

<div class="to-translate">text to be translated</div>

<div class="notranslate">this text will not be translated</div>

<script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement(
          {
              pageLanguage: "en"
          },
          "google_translate_element"
      );
      
      // 监听翻译容器的DOM变化
      const target = document.getElementById('google_translate_element');
      const observer = new MutationObserver((mutations) => {
          // 检查是否出现了目标下拉框
          const select = document.querySelector('.goog-te-combo');
          if (select) {
              select.value = "fr";
              // 触发change事件，让Google翻译执行切换
              select.dispatchEvent(new Event('change'));
              // 完成后停止监听
              observer.disconnect();
          }
      });
      
      observer.observe(target, { childList: true, subtree: true });
  }
</script>

补充说明 #

• 不推荐使用setTimeout：网络环境不同，Google脚本的加载时间不确定，固定延迟可能在某些场景下依然失效，MutationObserver是更精准的触发时机
• 必须触发change事件：仅仅设置value不会触发Google翻译的语言切换逻辑，需要手动派发change事件来触发翻译动作

内容的提问来源于stack exchange，提问作者msuf