Dynamically populated select menu on html page to be displayed on android webview without using jquery mobile

Question

I made a web app using google apps script and deployed it on the web. The application works well on PC, but when I load it to a webview on android, the dynamically populated <select> menus are not displayed (they are empty).

I know that google caja has an issue with jquery mobile from here, so I cannot use jquery mobile.

The question is if there is a way to make that <select> menus work using only jquery or javascript? Or maybe I can do some trick in android?

Here is an example of how I populate the menu using jquery:

function addClients(clients){   //array of options from google spreadsheets.
  $('#client').empty();
  for (var i in clients) {
    $('#client').append('<option>'+clients[i]+'</option>');
    $('#client').trigger("chosen:updated");
  }
}

HTML part:

<select name="client" id="client" data-native-menu="true" data-role="none">
    <option> ---- Choose a client ----</option>
</select>

Android part:

WebView myWebView  = (WebView) findViewById(R.id.webView1);
myWebView.loadUrl("--- my web app's URL here ---");
myWebView.setWebChromeClient(new WebChromeClient());

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Thank you in advance.

EDIT:

It looks kile the menu is not refreshing. At the beginning I have a built-in option:

<option> ---- Choose a client ----</option>

This option is deleted in jquery part, but then the menu is not updated, it stays empty.

I've already tried with no positive result:

$('#client').trigger("chosen:updated");

$('select').selectmenu('refresh');

$('#client').hide();
$('#client').show();

$('select#client').selectmenu('refresh');

Answer 1

I solved the problem. What I did is commented the line which emptied the select menu and used jquery ui for my purpose:

function addClients(clients){   //array of options from google spreadsheets.
  //$('#client').empty(); ---------- I commented this.
  for (var i in clients) {
    $('#client').append('<option>'+clients[i]+'</option>');
   // $('#client').trigger("chosen:updated"); ------- This line is also removed
  }
$(function() {  // And added jquery ui select menu
  $( "#client" ).selectmenu();
  });
}

This did the job. I'm not sure why though...