在下拉列表中触发单击事件

Question

I have 2 dropdown lists, the first one goes as follows :

<select name="country_id" id="country_id" tabindex="1" onchange="changeLang(this);">

    {section name=jj loop=$jezyki}            

        <option value="{$jezyki[jj].code}" {if $LANG.lang == $jezyki[jj].code} selected {/if}>{$jezyki[jj].name}</option>

    {/section}  
</select>

the second one is downloaded from google server, it is a google translate widget. What i need is when the user clicks on option from the first dropdown, script should change the value of the widget dropdown list AND trigger the click function to actually translate the page.

        function changeLang(someth){
                var nLang = someth.value;
                //$(".goog-te-combo option").val(someth.value);
              //  $(".goog-te-combo").trigger('click');    
        $(".goog-te-combo option[value="+nLang+"]").prop('selected',true).click();
            }

the snippet above changes the value. I can see, for example, english selected, but still it does not translate the page

Answer 1

You need to dispatch onchange event:

function changeLang(someth) {
    var nLang = someth.value,
        evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    $('.goog-te-combo').val(nLang)[0].dispatchEvent(evt);
}