使用Google Translate API时，select2下拉框的notranslate类失效求助

核心原因 #

Select2的下拉菜单属于动态生成的DOM元素，Google Translate API默认只在页面初始加载时扫描一次DOM，后续新增的元素不会被自动识别，直接添加notranslate类无法触发翻译器重新检测。同时，部分场景下翻译器会优先识别文本内容，忽略类名标记。

可行解决方案 #

1. 监听Select2展开事件，动态标记元素

在Select2下拉框展开时，手动给生成的容器和选项添加notranslate类与translate="no"属性，并通过MutationObserver阻止翻译器修改元素：

$(document).on('select2:open', function() {
  const dropdown = $('.select2-dropdown');
  // 标记容器和选项
  dropdown.addClass('notranslate').attr('translate', 'no');
  dropdown.find('.select2-results__option')
    .addClass('notranslate')
    .attr('translate', 'no');

  // 监听下拉框内的DOM变化，阻止翻译器新增元素
  if (window.google?.translate) {
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
          if (node.nodeType === 1) {
            node.classList.add('notranslate');
            node.setAttribute('translate', 'no');
          }
        });
      });
    });
    observer.observe(dropdown[0], { childList: true, subtree: true });
  }
});

2. 修改Select2初始化模板，默认添加标记

在初始化Select2时，自定义选项和下拉容器的模板，让生成的元素默认携带notranslate类：

$('select').select2({
  templateResult: option => {
    // 自定义选项模板，强制添加notranslate
    return $(`<span class="notranslate">${option.text}</span>`);
  },
  dropdownCssClass: 'notranslate' // 给下拉容器添加类
});

3. 全局MutationObserver监听所有Select2动态元素

通过全局DOM监听，自动给所有Select2相关的动态元素添加翻译忽略标记：

$(function() {
  // 初始化标记已有Select2元素
  $('.select2-container, .select2-dropdown, .select2-results__option')
    .addClass('notranslate')
    .attr('translate', 'no');

  // 监听整个页面的DOM变化
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          const isSelect2Element = node.classList.contains('select2-dropdown') ||
                                  node.classList.contains('select2-results__option') ||
                                  node.classList.contains('select2-container');
          if (isSelect2Element) {
            node.classList.add('notranslate');
            node.setAttribute('translate', 'no');
          }
        }
      });
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
});

额外提示 #

• 优先使用translate="no"属性，Google Translate对该属性的识别优先级高于notranslate类。
• 如果仍有问题，可以尝试在页面加载时先阻止Google Translate扫描Select2相关元素，再初始化Select2。

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