如何自定义排序Google翻译下拉组件的语言选项显示顺序

Google Translate 官方初始化参数没有提供语言排序配置项，默认会按语言名称的字母顺序排列选项，要实现自定义顺序展示，可通过DOM操作在组件渲染完成后重排下拉选项，支持任意自定义排序规则，具体实现如下：

实现逻辑 #

• 定义你需要的语言顺序数组，按优先级排列对应语言代码
• 等待翻译组件渲染完成后，取出下拉框内的所有选项节点
• 按照自定义顺序重新排列选项，清空原有下拉内容后重新插入排序后的节点
• 增加DOM监听，避免组件重渲染、语言切换后排序被还原为默认字母序

完整实现代码 #

<!-- 谷歌翻译组件容器 -->
<div id="google_translate_element"></div>

// 自定义排序规则：按你想要的展示顺序填写语言代码即可
// 示例顺序为：德语(de)、英语(en)、法语(fr)、意大利语(it)
const customLanguageOrder = ['de', 'en', 'fr', 'it'];

// 重排翻译下拉选项方法
function reorderTranslateOptions() {
  const selectElement = document.querySelector('#google_translate_element .goog-te-combo');
  if (!selectElement) return;

  // 提取所有选项，按自定义顺序匹配
  const allOptions = Array.from(selectElement.options);
  const sortedOptions = customLanguageOrder
    .map(langCode => allOptions.find(option => option.value === langCode))
    .filter(Boolean);

  // 重新插入排序后的选项
  selectElement.innerHTML = '';
  sortedOptions.forEach(option => selectElement.appendChild(option));
}

// 谷歌翻译组件初始化
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'en,de,fr,it'
  }, 'google_translate_element');

  // 首次渲染完成后执行排序，延迟等待DOM加载
  setTimeout(reorderTranslateOptions, 100);

  // 监听容器DOM变化，自动修正排序
  const domObserver = new MutationObserver(reorderTranslateOptions);
  domObserver.observe(document.getElementById('google_translate_element'), {
    childList: true,
    subtree: true
  });
}

使用说明 #

调整排序只需要修改customLanguageOrder数组内的语言代码顺序即可，无需改动其他逻辑，完全不受默认字母排序规则限制。

• 如果页面加载速度较慢，可适当调大setTimeout的延迟数值，确保能获取到渲染完成的下拉节点
• 如果是单页应用路由切换场景，路由切换后手动调用一次reorderTranslateOptions()即可保持排序正确

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