使用Google网站翻译插件选择2 - 超出最大调用堆栈大小

Question

我已使用以下网站中显示的以下步骤在我的网站上添加了Google网站翻译器：

https://translate.google.com/manager/website/

如果您不熟悉上述链接，则可以帮助您创建html和javascript展示位置，以便显示下拉列表。我正在尝试将自定义添加到html和javascript（如下所述）。

为了保持我正在构建的网站的主题，我正在尝试更改下拉列表以使用select2插件。

$(window).load(function () {
    setTimeout(function () {

        $('.goog-te-combo').select2()
            .on('change', function (e) {
                //console.log($('.goog-te-combo').val());
                var event;

                event = document.createEvent('HTMLEvents');
                event.initEvent('change', true, true);
                document.getElementsByClassName('goog-te-combo')[0].dispatchEvent(event);
            });
    }, 1000);
});

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
    }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

上面的代码工作，我能够让网站使用select2，包括自动完成。

问题是，我超出了最大呼叫大小，这是因为我一遍又一遍地创建一个递归调度更改事件。换句话说，在我的select2 on change方法中，我将另一个更改事件分派给触发的同一元素，从而使循环发生。我很想知道是否有任何方法可以解决这个问题，或者是否还有其他任何工作可以让它在没有任何错误的情况下工作。

Answer 1

几个小时后，我决定隐藏谷歌网站翻译，并创建一个新的下拉列表select2选项，当我更改此下拉列表的值时，我更改隐藏的谷歌下拉列表的值。

所以我隐藏了这个：

<div id="google_translate_element"></div>

并创建了一个新的选择选项：

<select id="newGoogleTrans">
    <option disabled value="0">Select one</option>
    <option value="ar">Arabic</option>
    <option value="en">English</option>
    <option value="fr">French</option>
</select>

这就是我控制下拉列表的方式：

$('#newGoogleTrans')
    .select2()
    .on('change', function () {
        value =  $('#newGoogleTrans').val();
        $('.goog-te-combo').val(value );
        document.getElementsByClassName('goog-te-combo')[0].dispatchEvent(event);
     })

编辑：

我还意识到需要更新下拉列表以反映您之前是否选择了下拉列表，因为浏览器会以cookie的形式保存以前选择的谷歌翻译下拉列表的状态，因此为了更新select2下拉列表面：

var nameEQ = "googtrans=";
var cookieVal = "";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ')
        c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0)
        cookieVal = c.substring(nameEQ.length, c.length).split("/")[2];
}
cookieVal = cookieVal == "" ? 'en' : cookieVal;
$('#newGoogleTrans').val(cookieVal );