Change selectMenu option programmatically in child inAppBrowser

Question

I open a window using javascript window.open()

The window that opens has the following code:

jQuery(document).ready(function(){
    jQuery("#lang").change(function(){
        var lname = jQuery(this).val().split("-");
        window.location = '<?php echo JURI::root();?>index.php?lang='+lname[0];
        alert(lname[0]);
        alert('lang '+lang);
    });

Now this code is triggered upon 'lang' select menu change. I open the window programmatically using window.open and I managed to populate data into the window fields using Window.executeScript(). For example this works for me:

loginWindow.executeScript({
   code: "jQuery('input#username').val('10500050')"
});

However, when I tried to follow the same logic for changing the selected item in selectMenu called 'lang' for the same window, I failed.

Attempts

I tried all the following lines in executeScript;

code: "$('#lang').val('ms')"
code: "jQuery('#lang option[value=ms]').prop('selected', true)"
code: "jQuery('#lang').selectmenu('value', 'ms')"

with these in the next executeScript to trigger change

code: "$('#lang').trigger('change')"
code: "$('#lang').selectmenu('refresh', true)"
code: "jQuery('#lang').selectmenu('refresh')"
code: "jQuery('#lang').selectmenu('change')"
code: "$('#lang').change()"

None of them helped. I'm not sure if I should combine them in one executeScript. I do not know how to do that. The window that opens is from different domain.

Am I missing something here?

The entire code on the opener side is as follows:

loginWindow.addEventListener( 'loadstop', function() {
    alert('test');
    var loop = setInterval(function() {
       loginWindow.executeScript({
          code: "jQuery('input#username').val('10500050')"
          },
          function( values ) {
             var give = values[ 0 ];
             if ( give ) {
                clearInterval( loop );
                giveMeUsername(); 
              }
          });

        loginWindow.executeScript({
           code: "  jQuery('input#name').val('10500050')"
            },
            function( values ) {
               var give = values[ 0 ];
                  if ( give ) {
                     clearInterval( loop );
                     giveMeUsername(); 
                   }
             });

        loginWindow.executeScript({
           //code: "$('#lang').val('zh')"
           //code: "jQuery('#lang option[value=ms]').prop('selected', true)"
           code: "jQuery('#lang').selectmenu('value', 'ms')"
           //code: "localStorage.setItem( 'lan', 'ms' )"
           },
           function( values ) {
              var give = values[ 0 ];
              if ( give ) {
                 clearInterval( loop );
                 giveMeUsername(); 
               }
            });

      loginWindow.executeScript({
         //code: "$('#lang').trigger('change')"
         //code: "$('#lang').selectmenu('refresh', true)"
         //code: "jQuery('#lang').selectmenu('refresh')"
         //code: "jQuery('#lang').selectmenu('change')"
         code: "$('#lang').change()"
         },
         function( values ) {
            var give = values[ 0 ];
            if ( give ) {
               clearInterval( loop );
               giveMeUsername(); 
             }
           });                        
     });
});

The first two executeScript work fine. But the last two (selectMenu part) do not work. Nothing occurs.

UPDATE

When add this code to the window itself, it works and the select box value is changed:

jQuery("#lang option[value='zh-TW']").attr("selected","selected");
jQuery('#lang').change();

However, when I add it inside executeScript in the parent window (opener), it does not work!

Answer 1

As the code works when I paste it directly in the child window inside jQuery(document).ready(function(), I assumed it should work from the parent window using executeScript. After many trial and error experiments, the following code worked for me:

                    loginWindow.executeScript(
                        {
                            code: "jQuery('#lang option[value=zh-TW]').attr('selected','selected'), jQuery('#lang').change()"                               
                        });

Which is the same code I mentioned in "Update" part of my question, except the difference in single quote and double quote. Here using executeScript, I had to manipulate to use double quote only to enclose the entire injected code, the rest I use single quote.

The code above, change the option selected in select box in child window using executeScript method in parent window (opener).