javascript - html页面上动态填充的选择菜单将在不使用jquery mobile的情况下显示在android webview上

Question

我使用谷歌应用程序脚本制作了一个网络应用程序并将其部署在网络上。该应用程序在 PC 上运行良好，但是当我将它加载到 Android 上的 Web View 时，动态填充的 <select>不显示菜单(它们是空的)。

我知道 google caja 与来自 here 的 jquery mobile 有问题，所以我不能使用 jquery mobile。

问题是是否有办法使 <select>菜单仅使用 jquery 或 javascript 工作？或者也许我可以在 android 中做一些技巧？

这是我如何使用 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 部分:

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

安卓部分:

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);

提前谢谢你。

编辑:

菜单不刷新看起来很奇怪。一开始我有一个内置选项:

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

这个选项在 jquery 部分被删除了，但是菜单没有更新，它仍然是空的。

我已经尝试过，但没有成功:

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

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

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

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

Answer 1

我解决了这个问题。我所做的是评论清空选择菜单并为我的目的使用 jquery ui 的行:

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();
  });
}

这完成了工作。我不确定为什么...